居中最大宽度和高度的div启用并保持长宽比

Question

如何居中最大宽度和最大高度的div，但也保持宽高比？

到目前为止我的代码中心格，但它不保持6的纵横比：5（高度：宽度）

#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

你不可能注意到的变化因为主容器本身的高度只有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规定的最大高度。