سبد (0)

عکس ها در طراحی واکنش گرای 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> استفاده کرده ایم.  

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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