Для создания соотношения сторон (aspect-ratio) можно использовать CSS-переменные и свойство padding-top/bottom. Вот пример:
HTML:
```
<div class="box">
Content
</div>
```
CSS:
```css
.box {
--aspect-ratio: 16 / 9; /* задаем соотношение сторон через CSS-переменную */
width: 100%; /* устанавливаем ширину элемента на 100% */
padding-bottom: calc(100% / var(--aspect-ratio)); /* вычисляем высоту элемента на основе заданного aspect-ratio */
background-color: gray;
position: relative;
}
```
В этом примере соотношение сторон задается через CSS-переменную `--aspect-ratio`, а ширина элемента остается на 100%. С помощью `padding-bottom` мы устанавливаем высоту элемента, используя вычисление вида `calc(100% / var(--aspect-ratio))`.
Чтобы конвертировать значения ширины и высоты из пикселей в проценты, можно использовать формулу:
```
(width / height) * 100
```
Например, если у вас есть элемент с шириной 800 пикселей и высотой 600 пикселей, вы можете расчитать значения ширины и высоты в процентах следующим образом:
```css
width: calc((800 / 600) * 100%);
height: 100%;
```
Здесь мы используем `calc` для выполнения вычислений и устанавливаем ширину элемента в процентах, а высоту оставляем на 100%.