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

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