Если у вас есть элемент <picture> с источниками изображений разных соотношений сторон на разных точках останова (breakpoints), каким образом можно минимизировать CLS, используя соотношение сторон и медиа-запросы в CSS?
Для <picture> вам следует позаботиться о том, чтобы каждое изображение <source> имело одинаковое соотношение сторон в вашем отзывчивом коде для изображений:
<img width="1000" height="1000" src="puppy-1000.jpg" srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w" alt="Щенок с шариками"/> Для <picture>, где каждый <source> имеет разное соотношение сторон, браузеры ожидают, что будет рекомендована ширина/высота для каждого <source> в случае использования арт-директивы:
<picture> <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279"> <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300"> <img src="https://via.placeholder.com/1500x300" width="1500" height="300"> </picture> В то же время вы можете указать высоту через хаки CSS с использованием padding-top, с разными медиа-запросами для каждой точки перелома <picture>.
Исходный элемент, поддерживающий атрибуты dimension, теперь является частью стандарта HTML - https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
Стандартизация соответствует уже предоставленной примерной реализации @addyo.
Для использования сценария художественной направленности с помощью элемента <picture>, где каждый элемент <source> имеет свои собственные различные соотношения сторон, каждый элемент <source> может предоставлять свои собственные значения для ширины и высоты width и height.
<picture> <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279"> <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300"> <img src="https://via.placeholder.com/1500x300" width="1500" height="300"> </picture> Реализация для поддержки браузеров уже запущена и вскоре будет доступна в caniuse.