Соотношение сторон CSS не поддерживается, когда высота родительского контейнера превышает предел ⇐ CSS

[Anonymous]

Я работаю над макетом, в котором дочерний элемент внутри родительского контейнера всегда должен поддерживать соотношение сторон 16:9. Размер родительского контейнера можно динамически регулировать с помощью JavaScript, и дочерний контейнер должен соответствующим образом адаптировать его размеры.
Вот проблема:

• Когда я увеличиваю ширина родительского контейнера, дочерний элемент корректируется правильно, сохраняя соотношение сторон.
• Однако, когда я значительно увеличиваю высоту родительского контейнера, высота дочернего элемента выходит за пределы ограничений соотношения сторон, нарушение макета.

Вот минимальный воспроизводимый пример моего кода:

Код: Выделить всё

#parent {
height: 90px;
width: 160px;
background-color: red;
display: flex;
justify-content: center;
/* tried to add: align-items: center; - it makes the child disappear. */
}
#child {
height: auto; /* tried also: max-height: 100%; */
max-width: 100%;
aspect-ratio: 16 / 9;
background-color: yellow;
object-fit: contain;
}






increase height
increase width

var height = 90;
var width = 160;

function increaseHeight() {
height += 100;
document.getElementById('parent').style.height = height + 'px';
}

function increaseWidth() {
width += 100;
document.getElementById('parent').style.width = width + 'px';
}

Как я могу гарантировать, что дочерний элемент всегда сохраняет соотношение сторон 16:9, независимо от размеров родительского элемента, не исчезая и не ломаясь? Любая помощь будет оценена по достоинству!


Подробнее здесь: https://stackoverflow.com/questions/792 ... eeds-limit