آموزش جلوگیری از بیرون زدن تصاویر وب سایت از عرض صفحه

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

overflow-hidden-value

سوالی دیروز توسط یکی از کاربران در بخش آموزش مطرح شد با عنوان اینکه چه کدی در CSS  قرار بدهیم که تصاویر به صورت اتوماتیک هم عرض صفحه وب سایت شده و از کادر بیرون نزند. این سوال در مورد متن هم صدق می کند یعنی اگر برای متن هم از کد درستی استفاده نشود از کادر مورد نظر که تنظیم کرده اید بیرون میزند . یک خاصیت برای جلوگیری از بروز چنین مشکلی وجود دارد .نام این خاصیت overflow می باشد .

 overflow برای جلوگیری از بیرون زدن متن از باکس در زمانی که محتوا بیشتر از عرض و ارتفاع باکس است مورد استفاده قرار می گیرد و برای تصویر اگر با دستور max-width:95% !important; همراه شود می تواند موثر باشد .  به تصاویر بخش آموزش دقت کرده اید ؟  بیشتر آنها عرضی بیشتر از 750 پیکسل دارند که عرض ثابت وسط صفحه می باشد ولی با دستور max-width:98% !important; به تصاویر اجازه بیرون زدن از کادر داده نمی شود .  

به طور کل overflow دارای 6 مقدار می باشد :
visible : این حالت، حالت پیش فرض می باشد یعنی اگر ما تعیین نکنیم، این حالت نمایش داده خواهد شد یعنی مازاد اندازه نشان داده خواهد شد.
hidden :  با این حالت آنچه مازاد بر تگ div میباشد نشان داده نخواهد شد
scroll : در این حالت دو خط اسکرول عمودی و افقی در کنار تگ div  ظاهر خواهد شد و می توان به وسیله این اسکرول ها باقی متن را دید.
auto : در این حالت در صورتی که در جهتی اندازه مازاد وجود داشته باشد در آن جهت اسکرول اضافه خواهد شد مثلا در بالا فقط در جهت عمودی خط اسکرول ظاهر خواهد شد.
initial : مقدار پیش فرض و قرار میده .
inherit : با توجه به مقدار عنصر والد مقدار و مشخص میکنه . مثلا اگر برای عنصر والد border-style مقدار solid مشخص شده باشه ، برای عنصر فرزند هم مقدار  solid مشخص میشه .

 

تا به این قسمت که فقط موارد مقدماتی آموزش داده شد . حالا می خواهیم ببینیم چه کدی در CSS قرار بدهیم که متن و تصویر از عرض صفحه بیرون نزند.

ابتدا باید عرض و ارتفاع صفحه را مشخص کنید .  سپس کد

 

.body{
overflow:hidden;
}

برای متن استفاده کنید و برای تصویر هم می توانید از کد زیر استفاده کنید

.img {
max-width:95% !important;
}

 

آخرین بروز رسانییکشنبه, 10 خرداد 1394 13:59

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #1 بینام 1394-07-27 22:56
سلام خسته نباشین
ممنون از مطالبتون ولی...
اگه به جای این مطالب که همه میدوننمنظور (کسایی که توی کار کدنویسی هستن) ترفند هایی رو آموزش میدادید که واقعا به درد آدم بخوره یلی خیلی بهتر نبود؟؟؟
مثلا من وقتی توی سایتم متنی رو مینوسم و حتی اگه اون متن خارج از دستور زبان باشه مثله سلااااااااااااا ااااااااااااااا ااااااام و...
حتما میخوام و دوست دارم که این مت بئون ایراد و خحذف و... توی همه مانیتور ها و موبایل ها باشه بدون کم و کاست !!
اگه امکان داره؟؟؟ از این قسم مطالب (ترفند ها بذارید )
با تشکر...
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»