必须同时设置width和height两个HTML属性为图片原始像素尺寸（如width="1920" height="1080"），否则浏览器因无法推导宽高比而按0×0占位，图片加载后触发重排导致CLS；二者须为无单位纯数字，且仅作用于<img>标签，与<srcset>选中资源无关。
必须同时写 width 和 height 两个 HTML 属性，且值为图片原始像素尺寸（如 width="1920" height="1080"），否则浏览器无法推导宽高比，CLS 必然发生。
为什么只写 width 或只写 height 不行
浏览器解析时若缺失任一属性，会按 0×0 占位；等图片加载完成才重排，下方内容就“掉下去”——这就是 CLS 的直接来源。旧版 Safari、SSR 渲染环境（如 Next.js / Nuxt 默认模式）尤其敏感，哪怕写了 width="800" 却漏了 height，它也可能完全忽略比例推算。
- 错误示例：
<img src="a.jpg" width="100%">、<img src="a.jpg" height="auto">、<img src="a.jpg"> - 这些写法在 Lighthouse 审计中都会标红，CLS 分数直接拉高
- 注意：
width和height是 HTML 属性，不是 CSS，不支持单位（"800px"）、百分比（"100%"）或"auto"
<picture> + <source> 场景下怎么填 width/height
防 CLS 的关键不在 <source>，而在最外层的 <img> 标签。它的 width 和 height 必须取原始图的固有像素尺寸（比如原图是 2400×1600，就写 width="2400" height="1600"），和最终加载哪张 srcset 图无关。
- 即使
<source>最终加载的是 300×200 的缩略图，浏览器仍按 2400:1600 的比例预留空间 - 常见错误：
<picture><source srcset="..."><img src="..."></picture>中的<img>忘了加这两个属性，或只加了一个 - 比例填错（如原图 4:3 却写
width="800"height="500"）会导致图片拉伸，且height: auto也无法挽救
CSS aspect-ratio 能替代 width/height 吗
不能直接替代，但可作为现代补充方案——前提是不用在 <img> 上，而要套一层容器。
立即学习“前端免费学习笔记（深入）”；
-
<img>是替换元素，旧版 Safari 不支持在其上直接用aspect-ratio；稳妥做法是用<div>或<figure>包裹，再设aspect-ratio: 16 / 9 - 仅靠
aspect-ratio不够：若子<img>写了width: 100%却没配object-fit，仍会横向拉伸、撑破容器 - 推荐组合：
div { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }+img { width: 100%; height: 100%; object-fit: cover; } - 兼容性兜底：需要支持 iOS 14.5 以下或旧 WebView 时，仍得回退到
padding-top: 56.25%+position: absolute容器
实际开发中最容易被忽略的一点
很多人以为只要图片“看起来没跳”，就算防住了 CLS。但真实场景中，动态插入图片（比如评论区头像、瀑布流卡片）、服务端渲染首屏、甚至字体加载触发的重排，都可能让 width/height 失效——因为它们只对静态 HTML 生效。这时候必须配合 font-display: swap、为动态内容预留固定容器高度、以及用 getLayoutShifts() 主动监控，否则上线后 CLS 指标仍可能突然飙升。
