直接给<img>加aspect-ratio无效，因其是替换元素，不参与CSS盒模型尺寸计算；必须用块级容器包裹并设置width和aspect-ratio才能生效。
为什么直接给 <img> 加 aspect-ratio 没用
因为 <img> 是替换元素，原生不参与 CSS 盒模型的尺寸计算逻辑。只写 aspect-ratio: 4/3 在 <img> 上，浏览器会忽略它——既不会推导高度，也不会预留空间。
必须用一个块级容器包裹图片，再对这个容器设置 aspect-ratio，且该容器需有明确宽度（比如 width: 100% 或固定值），否则比例无法生效。
- 错误写法：
<img src="a.jpg" style="aspect-ratio: 4/3;"> - 正确结构：
<div class="img-wrapper"><img src="a.jpg"></div>，然后对.img-wrapper设置样式
怎么写才能让容器真正“撑开高度”
aspect-ratio 不是魔法，它依赖宽度推导高度。如果父容器宽度不确定（比如 flex 子项未设 min-width: 0，或 width 被其他规则覆盖），那 aspect-ratio 就算写了也白写。
关键组合必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
display: block或display: inline-block（确保是块级上下文） -
width: 100%（或具体像素值，不能是auto） -
aspect-ratio: 16/9（或其他目标比例） - 避免
height、max-height等属性强行覆盖高度计算
示例：
.img-wrapper {
display: block;
width: 100%;
aspect-ratio: 16/9;
background-color: #f5f5f5;
}
.img-wrapper img {
width: 100%;
height: auto;
display: block;
}
和 loading="lazy" 一起用要注意什么
懒加载本身不导致抖动，但若没配合占位，图片在视口内才开始请求，此时容器还没高度，就会下移。而 aspect-ratio 的优势就在于：它不依赖图片是否加载，只要容器宽度已知，高度就立刻可算。
但要注意兼容性断层：
- Chrome 88+、Firefox 89+、Safari 15.4+ 支持
aspect-ratio - 旧版 Safari（iOS 15.2 及更早）或 Android WebView 需降级 fallback
- 降级方案建议用
padding-bottom技巧：height: 0; padding-bottom: 56.25%;（对应 16/9） - 别把
loading="lazy"和aspect-ratio当成互斥选项——它们是协同关系，不是二选一
容易被忽略的 flex / grid 场景失效点
在 display: flex 或 display: grid 容器里，子项默认有 min-width: auto 和 min-height: auto，这会导致 aspect-ratio 计算出的高度被“压缩归零”。
必须显式重置：
- 对 flex 子项加
min-width: 0和min-height: 0 - 对 grid 子项加
min-width: 0（尤其当列轨道用fr单位时） - 如果用了
object-fit: cover，确保父容器没设overflow: hidden以外的干扰样式（比如transform或will-change）
否则你会看到容器“存在但不可见”，或者高度忽大忽小——这不是 bug，是盒模型约束没解除。
