ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 10 آبان, 1393 6020 0

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

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;
}

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در یکشنبه, 10 خرداد 1394 ساعت 13:59
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا