最可靠防抖方案是为<img>设内联width/height或用CSS aspect-ratio约束其直接父容器；仅max-width:100%会导致加载前高度塌陷引发CLS，需配合宽高比、min-height:0及object-fit等确保布局稳定。
直接给 <img> 标签写内联 width 和 height 属性，或用 CSS aspect-ratio 给其父容器设宽高比——这是目前最轻量、最可靠、浏览器原生支持的防抖方案。其他靠 JS 算尺寸、靠 background-image 模拟、或只写 max-width: 100% 不配尺寸约束的做法，都会在图片加载前让容器高度塌陷为 0，必然引发布局抖动（CLS）。
为什么只写 max-width: 100% 和 height: auto 会抖
浏览器解析 HTML 时，若 <img> 没有内联 width/height，也没有父容器提供宽高比约束，它就无法预估渲染尺寸。初始渲染阶段，该元素占位高度为 0 或极小默认值（如 1em），等图片资源下载完成、解码完毕后才重排重绘——下方文字、按钮、卡片全部下移，用户肉眼可见“一跳”。
常见错误现象包括：
- 首屏图文混排中，图片加载慢时标题和正文突然往下掉
- Grid 布局卡片列表里，某张图加载延迟导致整行高度突变、相邻卡片错位
- 移动端竖屏切横屏后，图片重新计算尺寸引发二次抖动
这不是网络问题，是布局信息缺失导致的同步重排。
立即学习“前端免费学习笔记（深入）”；
aspect-ratio 必须作用在父容器上，而非 <img> 自身
aspect-ratio 对 <img> 元素的支持不稳定（尤其 Safari 15.4 之前、部分旧版 Chrome）。真正可靠的写法是把它加在图片的**直接父块级容器**上，比如 <div class="card-img"><img></div> 中给 .card-img 设样式。
实操要点：
- 父容器需有明确宽度（例如
width: 100%），否则aspect-ratio推不出高度 - 给父容器加
min-height: 0，防止 flex/grid 默认的min-height: auto干扰比例计算 -
<img>本身设width: 100%; height: 100%; object-fit: cover;，并确保display: block消除底部缝隙 - 避免同时设置
height或max-height，它们会覆盖aspect-ratio推导出的高度
示例：
.card-img {
width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
兼容旧环境时用 padding-top 百分比 fallback
当需要支持 iOS 15.3 及更早 Safari、或 IE 时，aspect-ratio 不可用，得回退到 padding 技巧。核心是利用 padding-top 的百分比值基于父容器宽度计算这一特性。
关键细节：
- 父容器设
position: relative，内部用伪元素或子<div>占位：padding-top: 56.25%（对应 16:9） - 图片设
position: absolute; inset: 0;覆盖整个占位区域 - 必须禁用图片默认的
vertical-align: baseline，否则底部留白 - 不能只靠
height: 0+padding-top就完事——要配合绝对定位和尺寸控制，否则内容仍可能溢出
不推荐仅靠 JS 动态插入 style 或监听 load 事件再设高：时机不可控、FOUC 风险高、CLS 分数照样差。
响应式图片（srcset）仍需保留内联 width/height
即使用了 srcset 和 sizes，也必须给 <img> 写内联 width 和 height。否则 Safari 和部分 Chrome 版本会忽略宽高比推算逻辑，依然出现抖动。
原因在于：srcset 是资源选择机制，不影响浏览器对 intrinsic 尺寸的判断；而内联 width/height 才是浏览器计算宽高比的唯一依据。
正确写法示例：
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
width="1200"
height="800"
alt="风景照"
/>
注意：width/height 填的是原始图的固有尺寸（intrinsic size），不是响应后显示尺寸。浏览器用它算出 3:2 宽高比，再结合 sizes 和容器宽度，动态推算加载前应占高度。
最容易被忽略的一点：Grid 或 Flex 容器里的图片，抖动往往不是图片本身的问题，而是父容器没设 min-height: 0 或隐式轨道未定义最小高度。哪怕用了 aspect-ratio，如果外层是 display: grid 且没配 grid-auto-rows: minmax(200px, auto)，依然可能因隐式行塌陷而抖。
