aspect-ratio 直接写在 img 或 video 上无效，因其为替换元素，自带固有尺寸，与 aspect-ratio 冲突导致浏览器行为不一致；正确做法是作用于外层容器，配合 width 和 object-fit 实现稳定比例控制。
aspect-ratio 直接写在 img 或 video 上为什么不行
因为 img 和 video 是替换元素，自带固有宽高；直接加 aspect-ratio: 16/9 会和 intrinsic size 冲突，尤其在未设 width 或 height 时，不同浏览器行为不一致——Safari 可能渲染空白，Chrome 可能拉伸变形。
必须用容器包一层，把 aspect-ratio 放在容器上，再让子元素填满：
- 容器设
aspect-ratio+width: 100% - 子元素加
width: 100%; height: 100%; object-fit: cover; - 若需懒加载，容器得先占位（否则页面跳动）
如何用 CSS 变量动态控制 aspect-ratio
现代浏览器支持 aspect-ratio: var(--ratio)，但变量值必须是形如 16/9 的分数字符串，不能带空格、不能是小数或百分比。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
<div class="media" style="--ratio: 21/9;">- CSS 中定义：
.media { aspect-ratio: var(--ratio); width: 100%; } - 避免写成
--ratio: "21/9"（引号会让值变成字符串字面量，失效） - 复用场景建议抽成类：
.ratio-21x9 { --ratio: 21/9; }，再组合使用
旧浏览器 fallback 怎么做才不翻车
aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 原生支持；IE 和 Safari ≤15.3 不支持，此时必须手动提供 fallback。
纯 CSS 无 @supports 自动降级机制，所以得双写：
- 先写 padding-bottom 方案（基于
padding-bottom: 56.25%的经典黑科技） - 再覆盖
aspect-ratio，现代浏览器会忽略 padding 规则 - 关键：子元素必须
position: absolute，否则 fallback 下内容会被顶出容器（常见现象：“只看到顶部一小条”）
Grid 或 Flex 里 aspect-ratio 失效的真正原因
它不是“不生效”，而是缺少计算基准——aspect-ratio 要求至少一个轴（宽或高）有确定值，否则浏览器无法推导另一轴。
典型失效场景：
- Flex 容器设了
flex-direction: column但没给高度 → 纵横比无参考 - Grid item 的父容器是
display: grid，但列定义用了auto或minmax(0, 1fr)→ 宽度不确定 - 直接对
grid-column用变量控制比例？别试，aspect-ratio和列跨度无关，那是grid-template-columns的事
真正容易被忽略的是：你写的 aspect-ratio 可能一直存在，只是因为父容器尺寸未定，它根本没机会触发计算。检查 DevTools 里元素 computed 面板的 aspect-ratio 值是否为 auto，就能确认是不是这个原因。
