Поддерживать соотношение сторон в соответствии с высотой

Мне нужно поддерживатьширина элемента в процентах от егорост, Так как высота меняется, ширина обновляется.

Противоположность достижима при использовании значения% для padding-top, но padding-left в процентах будет в процентах от ширины объекта, а не его высоты.

Так с разметкой вот так:

<div class="box">
  <div class="inner"></div>
</div>

Я хотел бы использовать что-то вроде этого:

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

Для обеспечения коробкисоотношение сторон поддерживается в соответствии с его высотой, Высота плавная из-за ее% поля - при изменении высоты окна высота окна тоже будет изменяться.

Я знаю, как добиться этого с помощью JavaScript, просто интересно, есть ли чистое решение только для CSS?

Ответы на вопрос(4)

Ваш ответ на вопрос