一个 CSS 属性aspect-ratio

设计稿中的组件常常精致、规整，但一旦进入开发阶段，尤其是响应式场景中，部分 UI 就容易失控。例如：一个包含图片、视频或需保持固定比例的卡片网格组件。表面看似简单，实则暗藏大量布局陷阱。

为了解决这些问题，许多项目中采用了监听 resize 事件、手动计算宽高比、动态注入 style 属性等方式。虽然功能实现了，但代码臃肿、可维护性差、兼容性问题频出。

直到一个 CSS 属性出现：aspect-ratio。

结果令人惊讶：几十行 JavaScript 瞬间可以被一行样式取代。

传统方案：JavaScript + 样式拼接

以下是许多项目中为实现等比例容器所采用的典型做法：

js 复制代码

const containers = document.querySelectorAll('.aspect-box');

function resizeBoxes() {
  containers.forEach(container => {
    const width = container.offsetWidth;
    container.style.height = `${width * 0.5625}px`; // 16:9
  });
}

window.addEventListener('resize', resizeBoxes);
resizeBoxes();

这种方式虽然"可用"，但存在多个问题：

维护成本高
需要额外的监听和逻辑处理
高性能设备上体验尚可，低性能设备下易卡顿
浏览器窗口缩放时容易出现抖动（layout jank）

一行代码的解决方案

在现代浏览器中，aspect-ratio 提供了原生支持，只需一行 CSS：

css 复制代码

.card {  
  aspect-ratio: 16 / 9;  
}

浏览器将自动根据父元素宽度计算出对应高度，从而保持设定比例，无需开发者干预。

举例

（1）卡片布局

以常见的卡片组件为例，传统写法通常如下：

css 复制代码

.card {  
position: relative;  
padding-top: 56.25%; /* for 16:9 */  
}  
.card > .content {  
position: absolute;  
top: 0;  
left: 0;  
height: 100%;  
width: 100%;  
}

这套方案依赖于"填充百分比"技巧实现高宽比。虽然通用，但冗长、语义不清。

使用 aspect-ratio 后，效果相同，逻辑更清晰，维护成本也更低。

css 复制代码

.card {  
  aspect-ratio: 16 / 9;  
}

（2）嵌入视频或构建方形网格

在视频嵌入中，aspect-ratio 同样能简化布局：

html 复制代码

<iframe src="..." style="width: 100%; aspect-ratio: 16 / 9;"></iframe>

无需嵌套容器，也无需额外 JS 控制。比例始终精准，兼容性良好。

同理，如果需要一个等宽等高的网格容器：

css 复制代码

.grid-item {  
  aspect-ratio: 1;  
}

快速生成自动适配的正方形卡片，视觉一致性更强。

（3）超简单4:3盒子

html 复制代码

<div class="card"></div>

css 复制代码

.card {  
  width: 100%;  
  aspect-ratio: 4 / 3;  
  background: #eee;  
}

页面会自动帮你撑出 4:3 的盒子，完美响应式，无需动脑。

浏览器兼容性

浏览器兼容性：基本无忧

浏览器	是否支持
Chrome	✅ v88+
Firefox	✅ v89+
Safari	✅ 已支持
Edge	✅ 支持
IE	❌（已退出历史舞台）

对于现代项目，aspect-ratio 已可放心使用。除非仍需兼容 IE，否则无需回退方案。

问题

（1）动态内容如何处理？

一个常见疑问是：当容器内部的内容尺寸发生变化时，是否会影响布局？

答案是：不会。

aspect-ratio 控制的是容器本身的比例，与内部内容加载状态、异步图片或 iframe 无关。无论内容何时加载，容器尺寸始终稳定，无布局抖动（CLS）问题。

（2）删除 JS，信任 CSS

如果在处理等比例布局时仍依赖 JS 计算，那么可能错过了 CSS 的现代能力。

使用 aspect-ratio：

✅ 实现清晰、简洁的布局逻辑
✅ 删除冗余监听器和计算代码
✅ 保证响应式体验一致
✅ 提高可读性与可维护性

这一属性不仅适用于卡片、视频、图片、网格，甚至可以扩展到弹窗、媒体内容、占位图等多种组件。

在构建现代布局系统时，应优先考虑使用 aspect-ratio，让浏览器做回真正的"布局引擎"。

注意

它默认是根据宽度算高度，当然也可以根据高度自动算宽度；
aspect-ratio 只在元素宽度或高度有一个未指定时生效；
通常页面是宽度先布局（更响应式），所以 aspect-ratio + width 用得更多；