Füllen Sie ein übergeordnetes DIV und halten Sie ein Verhältnis bei ⇐ CSS

[Anonymous]

Ich möchte einen Div -Abschnitt haben, der sein Div -Elternteil so weit wie möglich füllt, während ein Verhältnis beibehält. weit: < /p>


>

Code: Select all

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...

Dieses CSS verhält sich wie die Art und Weise, wie ich es möchte, aber dies verwendet das Ansichtsfenster anstelle des übergeordneten Divs, das unter realen Bedingungen ein Problem darstellt.>