aspect-ratio可在Chrome 88+、Firefox 89+、Safari 15.4+、Edge 101+中直接使用，但Safari 15.0–15.3会静默忽略，IE、X5内核等完全不支持；需配合width/max-width使用，不可与height共存，且必须作用于块级或弹性/网格子项容器，搭配object-fit等控制内容填充。
aspect-ratio能用，但不能无脑上——它在 Chrome 88+、Firefox 89+、Safari 15.4+ 和 Edge 101+ 中原生生效；Safari 15.0–15.3 会静默忽略（不报错、不警告、高度坍缩），微信 X5 内核、IE、Edge Legacy 完全不识别。如果你的项目要跑在企业内网或国内大量 iOS 15.2 以下设备上，把它当主干布局就是埋雷。
为什么写了 aspect-ratio 却没效果
最常被忽略的是：该属性只在有明确宽度（或高度）约束时才触发计算，否则浏览器根本没法推导另一轴。
- 漏了
width或max-width：比如只写aspect-ratio: 16 / 9，父容器又没设宽度，结果高度为 0 或由内容撑开 - 和
height冲突：写了height: 200px就直接废掉aspect-ratio，两者不可共存 - 用在
display: inline元素上：它只对块级、弹性子项、网格子项或替换元素（如img）有效 - 伪元素里设：比如
::before加aspect-ratio，无效——伪元素不生成独立盒模型 - Safari 15.0–15.3 真机测试过才信：Can I Use 的绿色标记在这里会骗人
aspect-ratio 的合法写法和典型错误
值必须是 <ratio></ratio> 类型，只接受两种格式：16 / 9 或 16/9（斜杠前后可有空格，但不能加单位、引号或冒号）。
- ❌
aspect-ratio: 4:3→ 静默失效，退回到内容撑高 - ❌
aspect-ratio: calc(16 / 9)→ 语法错误，CSS 不允许 - ❌
--ratio: "16 / 9"→ 字符串变量不被解析，必须是纯比值 - ✅
aspect-ratio: var(--card-ratio, 16 / 9)→ 合法，变量需提前定义为4 / 3这类形式 - ✅
aspect-ratio: auto 400 / 300→ 表示优先保持原始宽高比，再缩放到指定尺寸
怎么安全 fallback 到老方案
@supports 检测在 Safari 15.0–15.3 下不可靠（检测通过但实际不工作），所以不能只靠它降级。必须双写：先用 padding-bottom 百分比占位，再用 aspect-ratio 覆盖。
- 父容器设
position: relative; width: 100%; padding-bottom: 56.25%（16:9 → 9 ÷ 16 × 100%） - 子元素（如图片、文字层）加
position: absolute; inset: 0; width: 100%; height: 100% - 确保 padding-bottom 百分比生效的前提：父容器有明确宽度（不能是
display: flex下未分配空间的子项） - 别同时设
padding-bottom和height，否则高度叠加 - 这个 hack 在所有浏览器都稳，但会让子元素脱离文档流，慎用于需要 flex/gird 自动对齐的场景
和 img、video、iframe 配合的关键点
aspect-ratio 只管容器“框”的比例，不管里面内容怎么铺。想让内容填满且不失真，必须显式控制子元素。
- 对
img或video：容器设aspect-ratio+width: 100%，子元素加width: 100%; height: 100%; object-fit: cover - 对
iframe：必须用position: absolute; top: 0; left: 0; width: 100%; height: 100%，object-fit不适用 - 对背景图容器：用
background-size: cover或contain，不是靠aspect-ratio拉伸图片 - 别直接在
<img>标签上写aspect-ratio—— 固有尺寸和 CSS 比例容易冲突，Safari 可能渲染空白
真正容易被忽略的是：你写的 aspect-ratio 可能一直存在，只是因为父容器尺寸未定，它根本没机会触发计算。上线前务必在 Safari 15.2 和微信环境真机验证，而不是只看本地 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
