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

استفاده از ویژگی width

اگر ویژگی width  به 100٪ تنظیم شود، تصویر ریسپانسیو خواهد بود:

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

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

استفاده از ویژگی max-width

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

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

یک تصویر را به مثال وب اضافه کنید

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

پس زمینه تصویر

تصاویر پس زمینه نیز می توانند به تغییر اندازه و پوسته پوسته شدن پاسخ دهند.

در اینجا ما سه روش مختلف را نشان می دهیم:

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

در اینجا کد CSS است:

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

2- اگر ویژگی پسزمینه به " 100٪" تنظیم شده باشد، تصویر پس زمینه برای پوشش کل منطقه محتوا کشیده می شود:

در اینجا کد CSS است

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

3- اگر ویژگی پسزمینه روی « cover» تنظیم شده باشد، تصویر پسزمینه برای پوشش کل منطقه محتوا مقیاس می شود. توجه داشته باشید که مقدار "cover" نسبت تصویر را حفظ می کند، و برخی از قسمت های تصویر پس زمینه نیز ممکن است قطع شوند:

در اینجا کد CSS است:

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

تصاویر مختلف برای دستگاه های مختلف

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

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

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

شما می توانید از کوئری media ، min-device-width، به جای min-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');
    }

عنصر <picture>

HTML5 عنصر <picture> را معرفی کرد که به شما اجازه می دهد بیش از یک تصویر را تعریف کنید.

پشتیبانی مرورگر

ویژگی

<picture>

13

38.0

38.0

9.1

25.0

عنصر <picture> شبیه عناصر <video> و <audio> است. شما منابع مختلف را تنظیم می کنید و منبع اول که مطابق ترجیحات است یکی از موارد استفاده شده است:

 <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  اختیاری است
شما همچنین باید عنصر <img> را برای مرورگرهایی که از عنصر <picture> پشتیبانی نمی کنند تعریف کنید.