Адаптивные изображения часто реализуются с использованием атрибута 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>