只需
<div>使用百分比值创建包装器
padding-bottom，如下所示：
div { width: 100%; padding-bottom: 75%; background: gold; }.demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh - 16px);}<div > <div></div></div>
它将导致
<div>高度等于其容器宽度的75％（长宽比为4：3）。
这取决于以下事实：
相对于生成的盒子的包含块的宽度计算百分比（来源：w3.org，强调我的）
其他长宽比和100％宽度的填充底部值：
aspect ratio | padding-bottom value--------------|---------------------- 16:9 | 56.25% 4:3 | 75% 3:2 | 66.66% 8:5 | 62.5%
将内容放在div中：
为了保持div的长宽比并防止其内容拉伸，您需要添加一个绝对定位的子级，并使用以下方法将其拉伸到包装的边缘：
div.stretchy-wrapper { position: relative;}div.stretchy-wrapper > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
