如何使用纯CSS实现元素高度为自身/其他元素宽度乘以固定比例？

1. 基于自身宽度的比例高度实现 #

这个需求可以完全用纯CSS实现，有两种常用方案：

方案A：高兼容性的padding实现 #

CSS中padding的百分比值默认基于元素本身的包含块宽度计算，你要的1080/1920即9/16比例，对应56.25%的padding-top值，代码示例如下：

.item {
  width: 640px;
  position: relative;
}
/* 用伪元素撑出比例高度 */
.item::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
/* 内部内容需要绝对定位铺满容器 */
.item .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这个方案兼容包括IE在内的所有主流浏览器。

方案B：现代浏览器专属的aspect-ratio实现 #

现在所有主流现代浏览器都支持aspect-ratio属性，写法更简洁：

.item {
  width: 640px;
  aspect-ratio: 16 / 9;
}

直接设置宽高比为16:9，就自动满足高度等于宽度乘以1080/1920的要求。

2. 引用其他元素宽度计算高度的实现 #

这个需求目前没有原生纯CSS的实现方案。CSS的calc()函数不支持直接读取任意选择器对应DOM元素的实时属性值。
如果你的参考元素宽度是可提前定义的，你可以用CSS变量统一管理两个元素的尺寸，间接实现需求：

:root {
  /* 提前定义参考元素的宽度变量 */
  --ref-width: 640px;
}
/* 参考元素使用变量定义宽度 */
.ref-element {
  width: var(--ref-width);
}
.item {
  width: 640px;
  /* 复用变量计算高度 */
  height: calc(var(--ref-width) * 1080 / 1920);
}

如果参考元素的宽度是动态由内容或其他外部规则决定的，你只能通过JavaScript实现需求。

内容的提问来源于stack exchange，提问作者étale-cohomology