aspect-ratio 仅在 Chrome 88+、Firefox 89+、Safari 15.4+、Edge 101+ 生效；Safari 15.0–15.3 静默忽略致高度坍缩，需用 padding-bottom 百分比方案降级，并配合 width 设置及 object-fit 等确保内容正确显示。
能直接用，但只在 Chrome 88+、Firefox 89+、Safari 15.4+ 和 Edge 101+ 中生效；Safari 15.0–15.3 会静默忽略，容器高度坍缩或错乱，线上出问题很难排查。
aspect-ratio 基本写法和生效条件
直接写 aspect-ratio: 16 / 9 即可，空格不能省，也不能加单位或引号。它只对块级元素或替换元素（如 img、video）起作用，display: inline 元素无效。
必须配合显式宽度才能生效，常见组合：
-
width: 100%：最常用，适合流式父容器 -
max-width: 100%：避免图文混排时图片撑破行宽 -
width: 300px：固定宽度场景下仍保持比例
注意：height 不能同时设为非 auto 值（比如 height: 200px），否则 aspect-ratio 被完全忽略。
立即学习“前端免费学习笔记（深入）”；
为什么写了 aspect-ratio 容器却没高度
这是上线后最常遇到的“黑盒”问题——尤其在 Safari 15.0–15.3 或微信 X5 内核中，不报错、不警告，只是高度变成 0 或按默认行为渲染。
排查要点：
- 检查是否漏了
width或max-width；没有宽度约束，aspect-ratio无法推导高度 - 确认父容器没有
display: flex+align-items: stretch，这会让子项强行撑高，覆盖比例计算；加align-self: center可修复 - 真机测试 Safari 15.0–15.3，Can I Use 的绿色标记在这里不可信
- 伪元素（如
::before）里设aspect-ratio无效，它不生成独立盒模型
如何兼容老浏览器（尤其是 Safari & 微信）
@supports (aspect-ratio: 1/1) 本身在不支持的浏览器中会被整块跳过，无法触发降级逻辑，所以不能只靠它。
必须手动提供 fallback，推荐「padding-bottom 百分比占位」方案：
- 父容器设
position: relative; width: 100%; padding-bottom: 56.25%（16:9 → 9 ÷ 16 × 100%） - 子元素（如
img）设position: absolute; inset: 0; width: 100%; height: 100% - 内容层需再包一层
position: absolute; inset: 0，否则文字或按钮会脱离流
这个 hack 在所有浏览器都可靠，但要注意：它让子元素脱离文档流，不能和 flex 或 grid 的自动尺寸逻辑混用。
和 object-fit / background-size 配合的关键点
aspect-ratio 只管容器“框”的比例，不管里面内容怎么铺。想让图片填满且不失真，必须配对使用：
-
img+object-fit: cover：裁切显示，适合封面图；但要确保img同时设width: 100%; height: 100%，否则不生效 -
background-image+background-size: cover：可行，但背景图无固有宽高，aspect-ratio对它只是“画个框”，建议优先用img - 文字或按钮居中：用
display: flex; align-items: center; justify-content: center最自然
真正容易被忽略的是：服务端返回的原始宽高（HTML 的 width 和 height 属性）不是摆设——SSR 首屏更稳，也是 JS fallback 计算比例的可靠基准。
