我想创建一个div，它可以随着窗口宽度的变化而改变宽度/高度
是否有任何CSS3规则允许高度根据宽度改变，同时保持其纵横比
我知道我可以通过JavaScript实现这一点，但我更喜欢只使用CSS
只需创建一个包装器<；部门>带有一个百分比值，用于填充底部，如下所示：
.demoWrapper{
填充：10px；
背景：白色；
框大小：边框框；
调整大小：水平；
边框：1px虚线；
溢出：自动；
最大宽度：100%；
高度：计算（100vh-16px）；
}
div{
宽度：100%；
垫底：75%；
背景：gold；/**<；--用于演示**/
}<；div class=“demoWrapper”>；
<；部门></部门>；
</部门>它将导致一个<；部门>高度等于容器宽度的75%（长宽比为4:3）
这取决于以下事实：对于填充：
百分比是根据生成的框的包含块[…]的宽度计算的（来源：w3.org，emphasis mine）
填充其他纵横比和100%宽度的底部值：
纵横比|填充底部值
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
将内容放入div:
为了保持div的纵横比并防止其内容拉伸它，您需要添加一个绝对定位的子对象，并使用以下方法将其拉伸到包装的边缘：
div.stretchy-wrapper{
位置：相对位置；
}
分区弹性包装>；div{
位置：绝对位置；
顶部：0；底部：0；左侧：0；右侧：0；
}
这里有一个演示和另一个更深入的演示