Задаем пропорции элементов одной строкой!

Раньше, чтобы сохранить пропорции блока (карточки, превью, видео), писали так:
.preview {
position: relative;
padding-top: 56.25%;
}

Работает, но сложно читать, неудобно поддерживать.

Современный CSS решает это одной строкой:
.preview {
aspect-ratio: 16 / 9;
}

Браузер сам поддерживает пропорции элемента без абсолютного позиционирования и костылей.

Чтобы контент внутри не ломал пропорции:
.preview img {
width: 100%;
height: 100%;
object-fit: cover;
}

Идеально для карточек, галерей, видео, skeleton-экранов

Code Ready | #совет