Пример aspect-ratio, улучшаем показатель CLS

Пример, помогающий понять как работает aspect-ratio в css

Пример, помогающий понять как работает aspect-ratio в css.

У первой картинки задано свойство aspect-ratio: 144 / 72, родительский блок - display: flex
У второй картинки нет родительского блока, aspect-ratio задан
У третьей нет ничего из вышеперечисленного

Потыкайте кнопку ниже, чтобы увидеть разницу в загрузке картинок.

<div style=" display:flex; flex-direction: column">
	<img alt="с aspect-ratio, flex" src="/path/to/img.webp" style="aspect-ratio: 144 / 72;">
</div>
<img alt="с aspect-ratio, без flex" src="/path/to/img.webp" style="aspect-ratio: 144 / 72;">
<img alt="без всего" src="/path/to/img.webp">

<style>
	img {
		max-width: 100%;
		height: auto;
		width: auto;
		display: block;
	}
</style>

Как видно, только у первой картинки всегда сохраняются размеры, т.е. в таком виде она не будет двигать блоки ниже.

Вместо заполнения свойства aspect-ratio, можно указать аттрибуты width и height, браузер сам составит из них пропорции для aspect-ratio. Чтобы это работало, изображение должно быть блочным (display:block).

Остаётся открытым вопрос: почему при загрузке страницы только картинка с flex родителем не увеличивается в размерах?

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.