aspect-ratio 属性可一行设置宽高比，但 Safari 15.4 前、IE 及部分安卓 WebView 不支持；需配合 @supports 降级为 padding-bottom 方案，并注意仅设 width 或 height 之一才能生效。
aspect-ratio 能直接设宽高比，但老浏览器不认
现代 CSS 的 aspect-ratio 属性确实能一行搞定宽高比约束，比如让图片容器始终维持 16:9，不用 JS 算 padding-top 或写 media query。但它在 Safari 15.4 之前、所有 IE、以及部分安卓 WebView 中完全无效。
- Chrome 88+、Firefox 89+、Edge 88+ 原生支持
- Safari 需要 15.4+（iOS 15.4 / macOS 12.3+），旧版必须降级方案
- 若项目需兼容 iOS 14 或微信内置浏览器（X5 内核），
aspect-ratio不能单独依赖
用 aspect-ratio 时，width/height 设置会影响行为
aspect-ratio 不是“强制拉伸”，而是参与盒模型计算：它会在已知一个尺寸的前提下，推导另一个。如果同时写了 width 和 height，aspect-ratio 就被忽略——这点容易误以为属性没生效。
- 推荐只设一个明确尺寸（如
width: 100%），再加aspect-ratio: 16/9，高度自动算出 - 设
height: 200px+aspect-ratio: 4/3，宽度会按比例得出 266.67px - 设
width: 300px、height: 200px同时存在 →aspect-ratio彻底失效
替代方案：padding-bottom 实现兼容性宽高比
当 aspect-ratio 不可用时，传统方案仍是用 padding-bottom 配合 position: relative/absolute。原理是 padding 百分比基于父容器宽度计算，所以能稳定产出比例内边距。
- 父容器设
position: relative，子元素设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 父容器的
padding-bottom: 56.25%对应 16:9（9 ÷ 16 = 0.5625） - 注意：该技巧要求子内容脱离文档流，否则 padding 会撑开父容器高度，导致双倍留白
示例：
.ratio-16x9 {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.ratio-16x9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
aspect-ratio 和 object-fit / background-size 搭配容易混淆
aspect-ratio 控制的是容器盒子本身的宽高关系，不是内部内容的缩放方式。很多人设了 aspect-ratio: 1/1 又发现图片变形，其实是忘了配 object-fit: cover 或 background-size: cover。
立即学习“前端免费学习笔记（深入）”；
-
img在固定宽高比容器中，默认拉伸失真；加object-fit: cover才能等比裁剪填充 - 用
background-image时，aspect-ratio设容器，background-size: cover控制图如何填满 - 别把
aspect-ratio当成object-fit的替代品——它们解决的是不同层的问题
实际项目里，最常被漏掉的是 fallback 处理：CSS @supports 里包一层 aspect-ratio，外面写 padding-bottom 方案，不然 iOS 14 用户看到的就是塌掉的布局。
