根据高度维护 Div 纵横比

将元素的宽度保持为其高度的百分比可能具有挑战性。虽然使用 padding-top 的百分比值可以达到相反的效果，但 padding-left 作为百分比依赖于对象的宽度，而不是其高度。

为了解决这个问题，CSS 引入了宽高比属性，提供一个优雅的解决方案来根据高度保持一致的纵横比。以下代码片段演示了其用法：

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

在此示例中，.box 元素的流体高度为 50%，纵横比为 2:1。当容器的高度发生变化时，框的高度和宽度会相应调整，同时保留其纵横比。

纵横比属性可确保框的宽度与其高度保持成比例，而不管文本内容或容器的大小如何。这消除了对复杂 JavaScript 解决方案的需求，并提供了一种干净、高效的纯 CSS 方法来维护宽高比。