Адаптивные изображения и художественное оформление

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