aspect-ratio 不支持 calc() 或变量运算，仅接受字面量分数（如 16/9），浏览器会静默丢弃非法声明；padding-top + calc() + css 变量是唯一兼容且动态的替代方案。
不能用 aspect-ratio 直接参与变量运算，但可以用 padding-top + calc() + CSS 变量组合实现真正动态的宽高比控制。
为什么 aspect-ratio: calc(var(--w) / var(--h)) 会失效
浏览器会静默丢弃整条声明，不报错也不渲染——因为 aspect-ratio 只接受无单位、无空格、无引号的字面量分数（如 16/9），不支持运行时计算。哪怕写成 aspect-ratio: var(--ratio)，也必须满足三个硬条件：
-
--ratio在 :root 中定义为--ratio: 16/9;（不能带引号、不能有空格） - 使用时必须是直接代入：
aspect-ratio: var(--ratio);（不能套calc()、不能拼接） - 仅 Chrome 88+、Firefox 89+、Safari 15.4+ 支持；Safari ≤ 15.3 完全忽略
padding-top + calc() 是目前唯一可靠方案
利用 padding-top 百分比始终基于父容器宽度计算这一特性，配合 calc() 动态算出百分比值，再用绝对定位撑满内容区。这是兼容所有现代浏览器、支持变量参与运算、且不依赖 JS 的纯 CSS 方案。
- 定义变量：
:root { --aspect-w: 16; --aspect-h: 9; } - 容器样式：
position: relative; width: 100%; height: 0; padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%); - 内容层：
position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 若需 fallback，可用
@supports (aspect-ratio: 16/9)渐进增强：现代浏览器用aspect-ratio，旧版自动走 padding 路径
Flex/Grid 容器里 aspect-ratio 不生效的真实原因
不是“不兼容”，而是缺少推导基准：
- Flex 子项没设
flex-basis或显式width，父容器又没给定宽度 → 宽度不确定，aspect-ratio无法反推高度 - Grid item 被
grid-template-columns: 1fr等显式轨道约束 → 列宽已固定，浏览器不再尝试用比例算高度 - 同时写了
width和height（如width: 300px; height: 200px;）→ 浏览器按固定尺寸渲染，aspect-ratio彻底被跳过
真正的难点不在写法，而在理解 aspect-ratio 的语义本质：它不是“设置一个比例”，而是“参与盒模型计算的辅助约束”。一旦缺少可推导的一维尺寸，它就彻底沉默。变量能做的，只是安全地代入一个静态分数；想动态算，就得换思路，用 padding-top 这种 CSS 原生支持百分比按父宽计算的机制来绕过限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
