最直接解法是用原生HTML的width和height属性提前锁定尺寸，避免加载重排抖动；必须写具体数值且与原始宽高比一致，现代推荐aspect-ratio+width配合object-fit控制填充。
图片没设宽高时，浏览器先占位、加载完再重排，抖动就来了——最直接的解法不是靠 JS 监听，而是用原生 HTML/CSS 提前锁定尺寸。
img 标签必须显式声明 width 和 height 属性
HTML5 允许 width 和 height 作为布尔属性的“伪省略”，但实际渲染中不写 = 浏览器按 0×0 占位，图片加载后触发 layout shift。必须写具体数值（像素或响应式单位）。
-
width和height值应与图片原始分辨率一致，或按比例缩放后取整（避免小数导致 subpixel 渲染差异） - 若使用
rem、em或百分比，需确保父容器尺寸稳定，否则仍可能抖动 - 服务端生成图片时，建议在 HTML 模板中直接注入宽高，而非依赖 JS 补充
CSS aspect-ratio 配合 object-fit 控制内容填充
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，可替代 padding-top 技巧，且更语义化、更易维护。
- 对响应式图片，推荐写法：
<img src="..." style="aspect-ratio: 16/9; width: 100%; height: auto; object-fit: cover;"> -
object-fit: cover保证裁剪不拉伸；contain适合图标类小图，但留白可能导致后续元素跳动 - 注意：若图片本身宽高比与
aspect-ratio不符，且未设object-fit，会拉伸变形——这不是抖动，是错误表现
避免 width="100%" + height="auto" 组合
这个组合看似“响应式”，实则等于放弃尺寸控制：浏览器无法预知高度，加载完成前完全无占位，必然触发重排。
立即学习“前端免费学习笔记（深入）”；
- 即使父容器有固定宽高，
height="auto"仍会让 img 的 intrinsic size 参与计算，导致 layout shift - 替代方案：用
aspect-ratio+width: 100%，或用max-width: 100%; height: auto;配合父级aspect-ratio - 旧版浏览器兜底：可加
min-height: 1px防止塌陷，但不如显式宽高可靠
第三方图片服务（如 Cloudinary、Imgix）的宽高注入策略
这类服务通常提供 w/h 参数，但返回的图片尺寸 ≠ HTML 中声明的宽高——务必让服务端或构建工具同步输出匹配的 width/height 属性。
- 例如请求
https://.../image.jpg?w=600&h=400，HTML 中就必须写width="600" height="400" - 若用动态尺寸（如 viewport 适配），建议在 SSR 或构建时根据设备特征预计算宽高，而非客户端 JS 动态设置
- 警惕 CDN 缓存了带宽高属性的 HTML，但图片 URL 被缓存过期导致尺寸错配——这是抖动的隐藏源头
真正难的不是写对一行 aspect-ratio，而是让所有图片路径、构建流程、CDN 策略和 CMS 输出始终同步宽高信息。一个漏掉的 height，就可能让 LCP 指标突然恶化。
