应优先使用 aspect-ratio 实现等比容器，前提是目标环境为 iOS 15.4+/Chrome 88+/Firefox 89+；否则需用 padding-bottom 方案并配合 DOM 结构降级，因 @supports 无法解决结构差异问题。
aspect-ratio 属性在现代移动端流式布局中能直接、可靠地实现等比例容器，但它的兼容性与使用边界必须提前确认——iOS Safari 15.4+、Chrome 88+、Firefox 89+ 支持，而 iOS 15.0–15.3 和 Android UC 浏览器等仍不支持。
什么时候该用 aspect-ratio 而不是 padding-bottom 技巧
当目标是语义清晰、维护成本低、且运行环境可控（如企业内网 App WebView、或已明确要求 iOS ≥15.4）时，aspect-ratio 是首选。它不依赖子元素、不强制 height: 0、不干扰 overflow 或 flex 布局逻辑。
反过来说，如果你的页面要兼容微信内置浏览器（Android 端长期停留在 X5 内核，不支持 aspect-ratio）、或需支持 iOS 15.2 以下设备，就别用它——哪怕加了 @supports 降级，实际 fallback 仍需完整重写一套 padding-bottom 方案。
-
aspect-ratio: 16 / 9表示宽高比为 16:9；写成aspect-ratio: 1.777也合法，但推荐分数形式，更易读且避免浮点误差 - 它只作用于「具有块级盒模型」的元素，
display: inline元素无效；display: grid或flex子项中使用时，需确保父容器未用min-height或max-height破坏比例计算 - 不能和
height同时指定为非auto值，否则height会优先生效，aspect-ratio被忽略
aspect-ratio 在流式容器中的典型写法
在 100% 宽度的流式布局里，只需给容器设 width: 100% + aspect-ratio，高度自动按比例撑开：
.ratio-box {
width: 100%;
aspect-ratio: 2 / 1; /* 宽是高的两倍 */
background: #eee;
}
<p>.ratio-box img {
width: 100%;
height: 100%;
object-fit: cover;
}</p>
注意：这里 img 必须显式设 height: 100%，否则默认按内容尺寸渲染，可能溢出或留空白。如果容器内是文字或其它块级内容，也建议加 height: 100% 配合 display: flex 居中，避免内容塌陷。
兼容性 fallback 必须手动写，@supports 不够用
@supports (aspect-ratio: 1 / 1) 可以做检测，但它只控制样式是否生效，无法解决「降级后结构是否还能渲染正确」的问题。比如 padding-bottom 方案需要额外 wrapper 元素，而 aspect-ratio 版本不需要。
真实项目中更稳妥的做法是：服务端或构建时根据 UA 注入 class，或用 JS 检测后动态添加类名，再分别写两套规则：
.box { width: 100%; }
.box--has-aspect-ratio { aspect-ratio: 2 / 1; }
.box--no-aspect-ratio {
position: relative;
height: 0;
padding-bottom: 50%; /* 1/2 = 50% */
}
.box--no-aspect-ratio > * {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
这个 fallback 结构和原始 HTML 不一致，所以不能只靠 CSS 降级——你得在 DOM 层面准备好可切换的结构，或用 JS 动态包裹。
为什么不用 vw 单位替代 aspect-ratio
height: 50vw 看似简单，但它把比例锚定在视口宽度上，一旦容器被嵌套在非 full-width 的父级里（比如带 margin 的 card、或 flex item 设置了 flex-basis），就会失准。而 aspect-ratio 始终基于容器自身宽度计算，天然适配流式嵌套场景。
另外，vw 在横屏切换时会触发 layout shift（尤其配合图片懒加载），aspect-ratio 则无此问题——它属于盒模型计算阶段，不依赖 layout 触发时机。
真正容易被忽略的是：aspect-ratio 对「最小宽度约束」敏感。比如父容器设了 min-width: 320px，但子容器又写了 width: 100% + aspect-ratio: 1 / 1，那在小屏下高度会被锁死在 320px，可能撑爆视口。这种边界情况必须结合 max-width 和媒体查询一起控住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
