现代浏览器原生支持 aspect-ratio，可配合 CSS 自定义变量动态设置宽高比，如 aspect-ratio: var(--ratio, 16/9)；但不支持 calc()、字符串或带单位的值。
用 aspect-ratio 配合 CSS 自定义变量直接生效
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持 aspect-ratio，它能直接声明宽高比，无需 hack。配合 CSS 变量，就能动态控制比例，比如统一管理卡片、封面图、视频容器的宽高关系。
关键点是：变量必须在 aspect-ratio 值中参与计算，而该属性**不接受 calc() 外部包裹**，只能用变量直接代入：
-
aspect-ratio: var(--ratio, 16/9);✅ 合法，浏览器会解析为数值比 -
aspect-ratio: calc(var(--ratio));❌ 无效，calc()在这里不被允许 -
--ratio: "16 / 9";❌ 字符串无效，必须是纯数值比（如16/9或1.777）
示例：
:root {
--card-ratio: 4/3;
}
.card {
aspect-ratio: var(--card-ratio);
width: 100%;
max-width: 300px;
}为什么不能用 calc() 动态算 aspect-ratio
很多人尝试写 aspect-ratio: calc(var(--w) / var(--h));，但这是语法错误——aspect-ratio 的值类型是 <ratio>，不是数学表达式，也不支持运行时计算。CSS 变量在这里只是文本替换，最终必须是像 16/9 这样的合法比值。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：
- 把
--w设为16px、--h设为9px，再除 —— 单位无法相除，报错 - 设
--ratio: 16/9但漏掉空格或加引号 —— 解析失败，回退到浏览器默认（通常是auto） - 在旧版 Safari（
兼容性 fallback 必须手动写，不能靠变量自动降级
aspect-ratio 没有“优雅降级”机制。变量本身不触发兼容逻辑，你得显式提供后备方案。最稳妥的是用 padding-bottom + absolute 容器的经典 hack，并通过 @supports 隔离：
.media-container {
position: relative;
width: 100%;
}
<p>.media-container::before {
content: "";
display: block;
padding-bottom: calc(100% / (16/9)); /<em> 手动写死，变量进不来 </em>/
}</p><p>.media-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}</p><p>@supports (aspect-ratio: 16/9) {
.media-container::before { display: none; }
.media-container { aspect-ratio: var(--ratio, 16/9); }
}注意：padding-bottom 里的计算仍不能用变量，所以 fallback 部分和主逻辑是割裂的——变量只服务于现代路径。
实际项目中变量命名与维护的坑
当多个组件共用比例变量时，容易混淆语义。比如：
-
--ratio太泛，改一个影响全局 -
--avatar-ratio: 1/1和--hero-ratio: 21/9更安全 - 用
aspect-ratio: var(--hero-ratio, 21/9)保证即使变量未定义也不崩 - 构建工具（如 PostCSS）可提前把变量内联为字面量，但运行时 CSSOM 修改变量不会触发布局重算
真正动态切换比例（比如用户点击切换横竖屏预览）仍得靠 JS 切换 class 或 setProperty，且要同步更新所有依赖该变量的元素。
变量让维护变简单，但没消除底层约束：比例仍是静态声明的，不是响应式计算出来的。别指望它像 flex-basis 那样随内容流实时调整。
