Чтобы сохранять пропорции элементов в CSS, можно использовать свойство aspect-ratio. Например, если нужно сохранить пропорции 16:9 для блока с классом «box», можно задать следующее правило:
.box {
aspect-ratio: 16/9;
}
Таким образом, при изменении ширины блока, высота будет автоматически рассчитываться с учетом заданных пропорций.
Также можно использовать свойство padding-top для создания блока с заданными пропорциями. Например, чтобы создать блок с пропорциями 16:9, можно задать следующее правило:
.box {
position: relative;
padding-top: 56.25%; /* 9/16 * 100% */
}
.box > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
В этом случае, блок будет иметь высоту, рассчитанную на основе заданных пропорций, а содержимое можно разместить внутри блока с помощью абсолютного позиционирования.
