列表页的图都写了 width 和 height 上线后 CLS 还是 0.18 看元素发现外层容器宽度 100% 高度被写死 180px 图一进来就把卡片撑高。第一次遇到会往复杂处想，其实漏掉的多是个小前提。
curl -s https://example.com | grep -o '<img[^>]*>' npx lighthouse example.com --preset=desktop --view
只写 HTML 尺寸还不够 CSS 里的固定 height 会把它覆盖掉 浏览器算不出正确比例 占位高度和实际渲染高度对不上 图一加载完就必然重排。这一点先确认清楚，后面就不用反复试。
碰到「CLS 图片占位」这类问题，我习惯先把当前配置原样备份一份，改坏了立刻换回来，不用现场推。临时改动用注释写上日期和原因，过两周自己都记不清为什么这么写。
动手前把原文件复制一份带时间戳，出问题立刻换回去，比现场分析快得多。
具体做法是，图片的 CSS 只设置 width 100% 和 height auto 让高度全部由浏览器按比例去算；需要固定裁切的容器用 aspect-ratio 定好比例 再让里面的图片用 object-fit cover；别在 img 标签上同时写固定 height 和 max-width 100% 这两个属性会互相打架。
改完照着核一遍，图片加载前后卡片高度不变 CLS 降到 0.05 以下 缩略图也没被拉变形。