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