Вёрстка: Задать пропорции блоку без фиксированной высоты

Свойство aspect-ratio в CSS позволяет задать элементу фиксированные пропорции ширины и высоты без необходимости явно указывать height или использовать старые «padding-хак» при адаптивной вёрстке.

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

.hero-image {
	aspect-ratio: 16 / 9; /* Пропорция 16:9 */
	background: url('/img/bg.webp') center / cover;
}

.square {
	aspect-ratio: 1 / 1; /* Квадрат */
	background: url('/img/bg.webp') center / cover;
}

Браузер вычисляет высоту по формуле:

height = width / (X / Y)
# где X / Y — заданное соотношение.
# Если указано одно число (например, aspect-ratio: 1;), оно считается как 1 / 1

Свойство работает даже для элементов с background-image.

Для старых браузеров (включая IE11) можно добавить fallback через padding-top:

.fallback {
	position: relative;
	width: 100%;
	padding-top: calc(640 / 1920 * 100%); /* 33.33% */
}