عکس ها در طراحی واکنش گرای CSS
استفاده از خاصیت width
در صورتی که مقدار 100% را به خاصیت width بدهیم، عکس ما واکنش گرا خواهد شد و مقیاس آن به نسبت، کم و زیاد خواهد شد.
توجه کنید که در مثال بالا، عکس مورد نظر می تواند بزرگتر از اندازه ی اصلی خود شود. در بیشتر موارد، می توان برای حل این مشکل از خاصیت max-width استفاده نمود.
استفاده از خاصیت max-width
در صورتی که از خاصیت max-width با مقدار %100 استفاده کنیم، عکس مورد نظر به هنگام نیاز کوچک می شود اما اندازه ی آن هرگز بزرگتر از اندازه ی اصلی، نمی شود:
اضافه کردن یک عکس به صفحه وب مثال
عکس های پس زمینه
عکس های پس زمینه نیز به تغییر اندازه و مقیاس دهی، پاسخ می دهند.
در اینجا ما سه روش مختلف را برای واکنش گرا کردن عکس های پس زمینه به شما نشان می دهیم:
1. در صورتی که به خصوصیت background-size مقدار "contain" را بدهیم، عکس پس زمینه مقیاس دهی خواهد شد و سعی می کند تا خودش را در ناحیه ی محتوا جا کند. اما در این روش، عکس مورد نظر نسبت ابعاد خود را حفظ می کند:
کد CSS مثال بالا به صورت زیر است:
مثال (عکس ها در طراحی واکنش گرای CSS)
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. اگر که مقدار خاصیت background-size را برابر با "%100 %100" قرار دهیم، عکس پس زمینه گسترش می یابد تا تمام مساحت محتوا را پوشش دهد:
کدهای CSS مثال بالا به صورت زیر هستند:
مثال (عکس ها در طراحی واکنش گرای CSS)
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. در صورتی که مقدار خاصیت background-size را برابر با "cover" قرار دهیم، عکس پس زمینه تمام مساحت محتوا را پوشش می دهد. توجه کنید که مقدار "cover" نسبت ابعاد را حفظ می کند و ممکن است بخش هایی از عکس چیده شوند:
کدهای CSS مثال بالا، در زیر قرار دارند:
مثال (عکس ها در طراحی واکنش گرای CSS)
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
استفاده از عکس های متفاوت برای دستگاه های مختلف
استفاده از یک عکس بزرگ در یک صفحه ی نمایش بزرگ هیچ اشکالی ندارد، اما در یک صفحه ی نمایش کوچک با مشکل روبرو خواهیم شد. چرا وقتی که می توانیم یک عکس را مقایس بندی کنیم، از یک عکس بزرگ در یک صفحه ی نمایش کوچک استفاده کنیم؟ برای اینکه سرعت بارگذاری را افزایش دهیم، و یا به هر علت دیگری، می توانیم با استفاده از مدیا کوئری ها برای دستگاه های مختلف، از عکس های مختلفی استفاده کنیم. در زیر یک عکس بزرگ و یک عکس کوچک وجود دارند که در دستگاه ها با صفحه های نمایش مختلف، نمایش داده می شوند.
مثال (عکس ها در طراحی واکنش گرای CSS)
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 استفاده کنید. زیرا دستور min-device-width به جای بررسی عرض مرورگر، عرض دستگاه را بررسی می کند. بنابراین اگر شما پنجره ی مرورگر را تغییر اندازه دهید، عکس مورد نظر ما تغییر نخواهد نمود:
مثال (عکس ها در طراحی واکنش گرای CSS)
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');
}
}
استفاده از عنصر <picture> در HTML5
اچ تی ام ال 5، یک عنصر به نام <picture> را ارائه داده است، که به شما امکان می دهد تا بیش از یک عکس را در آن تعریف کنید.
| عنصر | |||||
|---|---|---|---|---|---|
| <picture> | 38 | 13 | 38 | 9.1 | 25 |
عنصر <picture> مشابه با عناصر <video> و <audio> عمل می کند. ابتدا شما برای این عنصر چند منبع(source) را مشخص می کنید و سپس آن منبعی که با مشخصات صفحه ی نمایش تطابق دارد مورد استفاده قرار می گیرد:
مثال (عکس ها در طراحی واکنش گرای CSS)
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
خصوصیت srcset یک خصوصیت ضروری است و منبع عکس مورد نظر را مشخص می کند.
استفاده از خصوصیت media اختیاری است و مدیا کوئری های شما را تعیین می کند.
همان طور که در کدهای بالا مشاهده می کنید، برای مرورگرهایی که از عنصر <picture> پشتیبانی نمی کنند، از یک عنصر <img> استفاده کرده ایم.
- نوشته شده توسط احسان عباسی
- بازدید: 11480
