能否使用CSS为任意非媒体元素设置固有宽高比？

当然可以！针对无法提前确定元素尺寸、需要动态维持固定宽高比的场景，目前有两种成熟的CSS方案：

1. 传统padding百分比技巧（兼容旧浏览器） #

利用CSS中padding-top/padding-bottom的百分比值基于父元素宽度计算的特性，我们可以实现固定宽高比的容器：

.aspect-ratio-container {
  width: 100%;
  /* 16:9 比例：9/16 = 0.5625 → 56.25% */
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

<div class="aspect-ratio-container">
  <div class="aspect-ratio-content">
    自定义内容区域
  </div>
</div>

• 核心逻辑：容器高度由padding-top撑开，始终保持与宽度的固定比例；内部内容通过绝对定位填充容器，不会破坏宽高比。
• 适配不同比例：4:3比例用padding-top: 75%，1:1正方形用padding-top: 100%，按需调整即可。

2. 现代CSS aspect-ratio属性（简洁直观） #

CSS推出的aspect-ratio属性，直接支持为元素设置固有宽高比，代码更简洁高效：

.aspect-box {
  width: 100%;
  /* 设置16:9的宽高比 */
  aspect-ratio: 16/9;
  background-color: #eee;
}

<div class="aspect-box">
  自定义内容区域
</div>

• 反向比例控制：如果需要固定高度，让宽度按比例缩放，只需设置高度即可：

.aspect-box {
  height: 50vh;
  aspect-ratio: 4/3;
}

• 兼容性：目前Chrome 88+、Firefox 89+、Safari 15.4+及所有现代Edge版本都已支持，适合无需兼容旧浏览器的项目。

两种方案对比 #

内容的提问来源于stack exchange，提问作者Alan H.