تصاویر پاسخگو و جهت هنری

تصاویر واکنشگرا اغلب با استفاده از ویژگی srcset پیاده سازی می شوند. ویژگی srcset لیستی از نام فایل های تصویری جدا شده با کاما و توصیف کننده های عرض یا چگالی آنها است. برای جلوگیری از تغییر چیدمان، ویژگی های width و height را روی تگ های <img> و <source> که از srcset استفاده می کنند، تنظیم کنید.

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

• همه تصاویر فهرست شده در src و srcset باید دارای نسبت تصویر یکسان باشند.
• ویژگی های width و height را برای مطابقت با ابعاد تصویر 1x تنظیم کنید.
• ویژگی src باید به تصویر 1x اشاره داشته باشد.

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

• همه تصاویر فهرست شده در src و srcset باید نسبت تصویر یکسانی داشته باشند.
• ویژگی های width و height را برای مطابقت با ابعاد تصویر بازگشتی تنظیم کنید.
• استایل تصویر را در صورت نیاز تنظیم کنید: در صورت عدم وجود هر گونه استایل CSS، تنظیم width و height روی یک تصویر واکنشگرا که از توصیفگرهای عرض استفاده می کند باعث می شود تصویر همیشه در همان اندازه ارائه شود - حتی اگر تصاویر فهرست شده در srcset ابعاد متفاوتی داشته باشند. این رفتار ممکن است آن چیزی نباشد که شما می خواهید. افزودن width: 100%; height: auto; یا width: 100vw; height: auto; یک ظاهر طراحی شده به تصویر شما ممکن است ظاهر بصری مورد نظرتان را به شما بدهد.

برای برچسب های <picture>:

• تنظیم ویژگی های width و height برای همه تگ های <source> : مقادیر مناسب برای width و height به نحوه استفاده تگ <source> از srcset بستگی دارد. (برای اطلاعات در مورد کار با srcset به بالا مراجعه کنید.)
• تنظیم استایل تصویر: اگر نیاز به تنظیم استایل تصویر دارید، به خاطر داشته باشید که افزودن استایل به تگ <source> تاثیری نخواهد داشت - تگ <source> یک عنصر خالی است. در عوض، باید تگ <img> مربوطه را استایل کنید.
• صفات width و height را در تگ <img> تنظیم کنید: این مقادیر باید با اندازه ذاتی تصویر بازگشتی مطابقت داشته باشند.

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>