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;"> <li>CSS 中定义：<code>.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婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

纯 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，就能确认是不是这个原因。