<div>只需为 的百分比值创建一个包装器padding-bottom，如下所示：

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}


<div class="demoWrapper">
  <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;
}

这是一个 演示
和另一个更深入的演示