جلسه دوم ریسپانسیو کردن تصاویر Responsive Images

آخرین بروز رسانی: بهمن ۱۲, ۱۳۹۴

دوستان وب یاری با دانش من سلام

جلسه دوم ریسپانسیو کردن تصاویر Responsive Images

با ادامه مطلب آموزش چگونگی ریسپانسیو کردن تصاویر با شما همراه هستیم,در آموزش قبلی سه خصوصیت(property) برای  background-size معرفی کردیم,در این آموزش میخواهیم ادامه های خصوصیت های background-size را برای ریسپانسیو کردن کردن تصاویر به شما آموزش میدهیم.

  1. خصوصیت background-size:cover باعث میشود تا تصویر شما مقیاس بندی شود تا اینکه تمامی ناحیه ی content را بپوشاند.با توجه به مثال زیر به درک بهتری از این مطلب میرسید.

div {
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-size: cover;
border: 1px solid red;
}

 

نمایش تصاویر با اندازهای گوناکون برای صفحه نمایش های گوناگون:

یک تصویر بزرگ میتواند بر روی یک کامپیوتر با صفحه نمایش بزرگ به صورت کامل نمایش داده شود اما بر روی یک صفحه ی کوچک به درستی نمایش داده نشود.

به منظور کاهش حجم لود تصاویر و یا به هر دلیل دیگری شاید شما بخواهید برای صفحه نمایش های مختلف از تصاویر مختلف استفاده کنید.بنابراین بهتر است که شما برای وسایل گوناکون با صحفه نمایش های گوناگون تصاویر گوناگون را لود کنید.

در زیر ما دو تصویر با اندازه گوناگون داریم:

آموزش برنامه نویسی اندرویدی Joapp

 

آموزش کار با مسنجر تلگرام(ترفندهای تلگرام)

/* For width smaller than 400px: */
body {
background-image: url(‘img_smallflower.jpg’);
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url(‘img_flowers.jpg’);
}
}

همان طور که از کدهای بالا مشخص است برای صفحه نمایش های کمتر از ۴۰۰ پیکسیل میخواهیم که تصویر کوچک تر نمایش داده شود,. و برای صفحه نمایش های بیشتر از ۴۰۰ پیکسل تصویر بزرگتر رانمایش دهد,چون لزومی ندارد که برای صفحه نمایش های کوچکتر تصویر بزرگتر لود شود.

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

شما میتوانید برای نمایش تصاویر گوناگون با اندازه های گوناگون به جای کد  min-width از کد min-device-width استفاده کنید,چرا که این کد برای نمایش تصاویر گوناگون با اندازه ای گوناگون به جای عرض مرورگرهای گوناگون عرض صفحه نمایش های گوناگون را قرار میدهد.

/* For devices smaller than 400px: */
body {
background-image: url(‘img_smallflower.jpg’);
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body {
background-image: url(‘img_flowers.jpg’);
}
}

مطالب مرتبط

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2016