عکس ها در طراحی واکنش گرای CSS

چاپ

استفاده از خاصیت width

در صورتی که مقدار 100% را به خاصیت width بدهیم، عکس ما واکنش گرا خواهد شد و مقیاس آن به نسبت، کم و زیاد خواهد شد. 

 

مثال (عکس ها در طراحی واکنش گرای CSS)

img {
    width: 100%;
    height: auto;
}
خودتان امتحان کنید »

 توجه کنید که در مثال بالا، عکس مورد نظر می تواند بزرگتر از اندازه ی اصلی خود شود. در بیشتر موارد، می توان برای حل این مشکل از خاصیت max-width استفاده نمود. 


استفاده از خاصیت max-width

 در صورتی که از خاصیت max-width با مقدار %100 استفاده کنیم، عکس مورد نظر به هنگام نیاز کوچک می شود اما اندازه ی آن هرگز بزرگتر از اندازه ی اصلی، نمی شود:

مثال (عکس ها در طراحی واکنش گرای CSS)

img {
    max-width: 100%;
    height: auto;
}
خودتان امتحان کنید »

 اضافه کردن یک عکس به صفحه وب مثال

مثال (عکس ها در طراحی واکنش گرای CSS)

img {
    width: 100%;
    height: auto;
}
خودتان امتحان کنید »

 


عکس های پس زمینه

عکس های پس زمینه نیز به تغییر اندازه و مقیاس دهی، پاسخ می دهند.

در اینجا ما سه روش مختلف را برای واکنش گرا کردن عکس های پس زمینه به شما نشان می دهیم:

1. در صورتی که به خصوصیت background-size مقدار "contain" را بدهیم، عکس پس زمینه مقیاس دهی خواهد شد و سعی می کند تا خودش را در ناحیه ی محتوا جا کند. اما در این روش، عکس مورد نظر نسبت ابعاد خود را حفظ می کند:

 

 کد CSS مثال بالا به صورت زیر است:

مثال (عکس ها در طراحی واکنش گرای CSS)

div {
    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)

div {
    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)

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}
خودتان امتحان کنید »

 


 استفاده از عکس های متفاوت برای دستگاه های مختلف

استفاده از یک عکس بزرگ در یک صفحه ی نمایش بزرگ هیچ اشکالی ندارد، اما در یک صفحه ی نمایش کوچک با مشکل روبرو خواهیم شد. چرا وقتی که می توانیم یک عکس را مقایس بندی کنیم، از یک عکس بزرگ در یک صفحه ی نمایش کوچک استفاده کنیم؟ برای اینکه سرعت بارگذاری را افزایش دهیم، و یا به هر علت دیگری، می توانیم با استفاده از مدیا کوئری ها برای دستگاه های مختلف، از عکس های مختلفی استفاده کنیم. در زیر یک عکس بزرگ و یک عکس کوچک وجود دارند که در دستگاه ها با صفحه های نمایش مختلف، نمایش داده می شوند. 

 

مثال (عکس ها در طراحی واکنش گرای CSS)

/* 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 استفاده کنید. زیرا دستور min-device-width به جای بررسی عرض مرورگر، عرض دستگاه را بررسی می کند. بنابراین اگر شما پنجره ی مرورگر را تغییر اندازه دهید، عکس مورد نظر ما تغییر نخواهد نمود:

مثال (عکس ها در طراحی واکنش گرای CSS)

/* 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');
   
}
}
خودتان امتحان کنید »

 


استفاده از عنصر <picture> در HTML5 

 اچ تی ام ال 5، یک عنصر به نام <picture> را ارائه داده است، که به شما امکان می دهد تا بیش از یک عکس را در آن تعریف کنید.

عنصر          
<picture> 38 13 38 9.1 25

 عنصر <picture> مشابه با عناصر <video> و <audio> عمل می کند. ابتدا شما برای این عنصر چند منبع(source) را مشخص می کنید و سپس آن منبعی که با مشخصات صفحه ی نمایش تطابق دارد مورد استفاده قرار می گیرد:

مثال (عکس ها در طراحی واکنش گرای CSS)

<picture>
  <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> استفاده کرده ایم.