Заполнить родительский див, сохраняя соотношение ⇐ CSS

[Anonymous]

Я хочу иметь раздел div, который как можно больше заполняет его родителя Div, сохраняя соотношение. далеко: < /p>

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

html,
body {
height: 100%;
}

.parent {
/* Parent's height and width are unknown,
it could be dynamic, e.g. parent is part of a flex layout. */
height: 80%;
width: 90%;
border-style: solid;
border-width: 2px;
border-color: black;
}

.child {
width: 90vw;
/* 90% of viewport vidth */
height: 50.625vw;
/* ratio = 9/16 * 90 = 50.625 */
max-height: 90vh;
max-width: 160vh;
/* 16/9 * 90 = 160 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #A0522D;
}< /code>


content that is not images...

Этот CSS ведет себя так, как я хочу, но это использует просмотр вместо родительского div, что является проблемой в реальных условиях.
>

Подробнее здесь: https://stackoverflow.com/questions/402 ... ng-a-ratio