aspect-ratio 必须作用于外层块级容器（如 div），配合 width 或 max-width 才能推导高度防抖动；直接写在 上无效，因其是替换元素，safari 15.4 前及部分 webview 会忽略该声明。
aspect-ratio 能防止抖动，但**只写 aspect-ratio: 16 / 9 是无效的**——它必须配合明确宽度才能推导出高度，否则容器可能塌陷或无限拉伸。
为什么直接给 <img> 加 aspect-ratio 不生效
<img> 是替换元素，在 Safari 15.4 之前、IE 全系列及部分 Android WebView 中，aspect-ratio 不参与其盒模型计算。浏览器会直接忽略该声明。
- 错误写法：
<img src="a.jpg" style="max-width:90%"> - 正确结构：用
<div class="img-wrapper"><img src="a.jpg"></div>，并对.img-wrapper设置aspect-ratio - 必须确保
.img-wrapper是块级上下文（display: block或grid等），且不被父级height、flex: 1或align-items: stretch覆盖
aspect-ratio 必须搭配 width 或 max-width
没有宽度约束时，aspect-ratio 就像“知道比例却不知道起点”，无法生成实际高度。
- ✅ 推荐：
width: 100%; aspect-ratio: 16 / 9;—— 容器随父级变宽，高度自动按比例撑开 - ✅ 更稳：
max-width: 100%; aspect-ratio: 4 / 3;—— 防止超大图撑破布局 - ❌ 危险：
aspect-ratio: 16 / 9;单独使用，无宽度控制 → 容器可能缩成一条线，或在 flex/grid 中被压缩归零 - 若在
display: flex容器中，子项需加min-width: 0; min-height: 0;，否则默认min-height: auto会干扰比例计算
如何兼容旧版 Safari（iOS 15.2 及更早）
不能只靠 @supports 切换，因为 fallback 必须在原生属性不可用时**立即生效**，否则首屏仍会抖动。
- 用
padding-top技巧：父容器设position: relative; padding-top: 56.25%;（对应 16:9），图片设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 用
@supports (aspect-ratio: 1)覆盖掉padding-top，而非删除它：.img-wrapper { padding-top: 56.25%; } @supports (aspect-ratio: 1) { .img-wrapper { padding-top: 0; aspect-ratio: 16 / 9; width: 100%; } } - 别用
min-height替代padding-top—— 它不会触发容器预留空间，无法防抖
别让 object-fit 和 height: auto 暗中破坏 aspect-ratio
aspect-ratio 只管容器盒子，不管里面内容怎么铺；但某些 CSS 值会直接覆盖它的高度计算逻辑。
-
height: auto在<img>上会强制重置高度为内容驱动，导致容器比例失效 —— 应改为height: 100%或留空 -
object-fit: cover或contain是必需的，否则图片可能拉伸或留白；但要配width: 100%; height: 100%才能生效 - 避免单独写
max-width: 100%而不设width—— 它不提供渲染宽度基准，aspect-ratio仍无法算高 - HTML 中的
width/height属性可保留（用于 LCP 计算），但 CSS 中不能用height: auto覆盖容器高度
aspect-ratio 不能靠猜。要么服务端内联 style="aspect-ratio: ${w} / ${h}"，要么用 JS 读取原始尺寸后注入 CSS 变量——纯 CSS 没有运行时计算能力。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
