最大幅と高さを有効にし、アスペクト比を維持する中央div

Question

divを最大幅と最大高さに合わせるにはどうすればいいですか？

私のコードは、これまでのdivを中心に、それは6のアスペクト比を維持しません：あなたは変化に気づくcouldntの

#main-content { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    height: 100%; 
 
    height: 500px; 
 
    background-color: #953d44; 
 
    position: relative; 
 
} 
 

 
#container { 
 
    width: 80%; 
 
    height: 80%; 
 
    max-height: 600px; 
 
    max-width: 500px; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
    background-color: cornflowerblue; 
 
}

<div id="main-content"> 
 
    <div id="container"></div> 
 
</div>

https://codepen.io/timsim/pen/dWMbqR

Answer 1

：5（幅高さ）主な容器自体の高さは500pxしかなかったからです。私は1000pxに変更しました。

次のスニペットを実行し、フルスクリーンモードに移行します。実際には機能します。

#main-content { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    height: 100%; 
 
    height: 1000px; 
 
    background-color: #953d44; 
 
    position: relative; 
 
} 
 

 
#container { 
 
    width: 80%; 
 
    height: 80%; 
 
    max-height: 600px; 
 
    max-width: 500px; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
    background-color: cornflowerblue; 
 
}

<div id="main-content"> 
 
    <div id="container"></div> 
 
</div>

P.S：OFCこの習慣ワーク主容器の高さはcontanierに指定された最大高さ次に小さい場合。