比率を維持しながら親divを塗りつぶします。

Question

割合を維持しながら、できるだけdivの親を埋めるdivセクションを作成したいと考えています。

レンダリング結果は次のようになります：

私がこれまで持っているかどう：

html, body{ 
 
height:100%; 
 
} 
 

 
.parent{ 
 
height: 100%; 
 
width: 100%; 
 
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; 
 
}

<div class="parent"> 
 
     <div class="child"> 
 
      content that is not images... 
 
     </div> 
 
    </div>

をこのCSSは私が好きな方法のように振る舞うBUT実際の状況では実際の問題である親divの代わりにビューポートを使用しています。

私は本当に親のdivに埋めるための方法を探していますが、私はこれまでどんな答えを見つけることができませんでした...

Answer 1

は、たぶん、これは何が必要です。

html, body{ 
 
height:100%; 
 
} 
 

 
.parent{ 
 
height: 100%; 
 
width: 100%; 
 
    
 
border-style: solid; 
 
border-width: 2px; 
 
border-color: black; 
 

 
} 
 

 
.child { 
 
width: 50%; 
 
height: inherit; 
 
margin: 0 auto; 
 
left: 25%; 
 
position: absolute; 
 

 
background: #A0522D; 
 
}

<div class="parent"> 
 
     <div class="child"> 
 
      content that is not images... 
 
     </div> 
 
    </div>