آموزش ریسپانسیو کردن تصاویر Responsive Images

خانه » بلاگ » bootstrap » آموزش ریسپانسیو کردن تصاویر Responsive Images

همه چیز در خصوص ریسپانسیو کردن تصاویر

تا به حال مطالب زیادی در خصوص ریسپانسیو کردن وب سایت توسط تیم طراحی سایت وب یار در اختیار شما عزیزان قرار گرفته، در این پست آموزشی قصد داریم تمامی نکات درخصوص ریسپانسیو کردن تصاویر را به شما معرفی کنیم.در مورد ریسپانسیو کردن صفحات وب سایت مطلب آموزشی ریسپانسیو کردن جداول responsive table  را حتما بخوانید.

اولین نکته درخصوص ریسپانسیو کردن تصاویر(Responsive images):

یه نکته خیلی ساده و آموزشی اینه که اول از همه از خصوصیت مهم width استفاده کنید,ومقدار آن را برابر ۱۰۰% قرار دهید.همانند مثال زیر :

img {
width: 100%;
height: auto;
}

دومین نکته در خصوص طراحی ریپسپانسیو تصاویر:

دومین نکته در خصوص طراحی ریسپانسیو تصاویرآن است که خاصیت background-size که برابربا مقدار “contain” قرار بگیرد.اگر چه با این مقادیر برای خصوصیت background-size تصویر ریسپانسیو میشود,اما تصویر بین عرض و طولی که در کدهای css برایش تعریف شده است قرار میگیرد. بنابراین تصویر به عنوان بگراند تمامی ناحیه

Contain را نمیپوشاند و مابین این ناحیه قرار میگیرد.

 

 

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

سومین نکته طراحی ریسپانسیو تصاویر:

در صورتی که خصوصیت background-size را برابر با مقدار “۱۰۰% ۱۰۰%” باشد, تصویر مورد نظر با هر طول و عرضی کشیده میشود تا درون ناحیه ی content قرار بگیرد.

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

چهارمین نکته طراحی ریسپانسیو تصاویر:

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

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

 

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

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

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

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

 

/* 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’);
}
}