aspect-ratio在Chrome 88+、Firefox 89+、Safari 15.4+（即iOS 15.4/macOS 12.3+）原生支持；iOS 15.2及更早Safari、微信X5内核、IE、Edge Legacy等不支持，会静默忽略。
aspect-ratio 属性在哪些浏览器里能用
Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio；iOS 15.2 及更早的 Safari、微信内置浏览器（多数基于旧版 WKWebView）、IE 和 Edge Legacy 完全不识别该属性，会静默忽略。如果你的项目需兼容企业内网或国内移动端，不能把它当布局主干。
实操建议：
- 用
@supports (aspect-ratio: 1/1)包裹关键样式做渐进增强 - 构建时检查 PostCSS / autoprefixer 配置——某些老旧版本会自动删掉
aspect-ratio - 别在 Flex 或 Grid 子项中单独设
aspect-ratio却不给父容器设width，否则宽高比失去计算基准
aspect-ratio 的值怎么写才不被浏览器跳过
只接受两种格式：16/9 或 16 / 9（斜杠前后可有空格），但不能写成 16:9、1.777 或 calc(16 / 9)。写错不会报错，只是整条声明失效，元素退回到内容撑高行为。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio: 4:3→ 页面完全无反应，高度由子内容决定 -
aspect-ratio: auto 400/300→ 合法，表示优先保持原始宽高比，再缩放到指定尺寸 - 在
img上直接写aspect-ratio但没配width: 100%→ 图片仍按固有尺寸渲染，比例无效
为什么加了 aspect-ratio 还是没效果
最常被忽略的是：该属性只控制容器自身的宽高比，不接管子元素的尺寸逻辑。比如一个 div 设了 aspect-ratio: 16/9，里面放个默认 img，它依然按原始像素宽高显示，可能溢出或留白。
必须配合子元素显式控制：
- 对
img或video：加width: 100%; height: 100%; object-fit: cover;（注意object-fit不适用于iframe） - 对
iframe：必须加position: absolute; top: 0; left: 0; width: 100%; height: 100%，推荐类名position-absolute top-0 start-0 w-100 h-100 - 对背景图容器：用
background-size: cover或contain，而非依赖aspect-ratio拉伸图片
没有 aspect-ratio 时怎么 fallback
主流兼容方案仍是 padding-top 百分比技巧：父容器设 position: relative + padding-top: 56.25%（对应 16:9），子元素用 position: absolute 覆盖。这个技巧在所有浏览器都稳。
注意点：
-
padding-top的百分比始终相对于父容器宽度计算，所以必须确保父容器有明确宽度（如width: 100%或 flex 布局下已分配空间） - 别把
padding-top和height同时设，否则高度会叠加 - 若用 Bootstrap 5，直接上
ratio ratio-16x9类，它内部已封装了aspect-ratio+padding-bottomfallback
真正难的不是写对 aspect-ratio，而是判断什么时候该用它、什么时候该让步给 padding 技巧——尤其当设计稿要求“在 iOS 14.5 手机上也得严丝合缝”时，那个 padding-bottom 就不是备选，是必选。
