تصاویر واکنشگرا اغلب با ویژگی 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>تنظیم کنید. مقادیر مناسب برای این ویژگی بستگی به نحوه استفاده تگ<source>srcsetدارد. - تصویر را با استایل کردن تگ
<img>مربوطه تنظیم کنید. تگ<source>یک عنصر خالی است و بنابراین استایل تاثیری ندارد. - صفت
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>