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