CSS aspect-ratio и размеры img: стабильный блок под медиа

Как зарезервировать пропорции до загрузки файла и снизить CLS без жёстких пикселей на каждый брейкпоинт.

Свойство `aspect-ratio` задаёт соотношение сторон контейнера; в связке с `width: 100%` и `height: auto` у `<img>` браузер резервирует место до декодирования картинки.

Для responsive images сохраняйте width/height атрибуты или явные размеры из CMS — это подсказка для intrinsic size.

aspect-ratio — MDN — Синтаксис и примеры.
Optimize CLS — web.dev — Связь размеров и CLS.

Видео и embed

Для iframe с 16:9 оборачивайте в ratio-box, чтобы плеер не раздувал страницу при поздней инициализации.

Проверяйте CLS в Web Vitals extension после включения третьесторонних виджетов.