用 background-image 替代 标签并配合 min-height 是最可靠、零 JS 的 CLS 解决方案；因 未声明尺寸会导致异步加载时重排，而 background-image 彻底隔离流内影响，避免推挤内容。
直接用 background-image 替代 loading="lazy"、width/height 属性）只能缓解，无法根治。
为什么 ![]()
浏览器解析到 width 和 height，就无法预留空间；图片异步加载完成前，后续内容（、）会先按“高度为 0”渲染，等图片下来再重排——这就是累积布局偏移（CLS）的典型来源。
即使写了 width="300" style="max-width:90%"，在响应式场景下（比如 max-width: 100%）仍可能被 CSS 覆盖，导致尺寸失效。
用 background-image + min-height 彻底隔离流内影响
把图片从文档流里“拿掉”，它就再也不会推挤文字或改变容器高度：
– 必须给每个容器设 min-height（不能只靠 height，否则小图会拉伸变形）
– background-size: cover 或 contain 控制裁剪/缩放行为
– 内容层用 position: absolute 叠加，脱离流布局
.grid-item {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px; /* ✅ 关键：所有项统一占位 */
}
.grid-item .content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1em;
}
HTML 结构也要同步改：
– 不再用
– 改为 ...
Grid 布局中必须提前定义网格轨道尺寸
如果用 grid-template-rows: auto 或留空，浏览器仍会等图片加载完才确定行高，CLS 照样发生。
正确做法是：用 minmax() 或固定值锁定轨道高度
-
grid-template-rows: repeat(2, minmax(400px, auto))—— 最小 400px，允许撑高 -
grid-auto-rows: 400px—— 所有隐式行统一高度 - 避免
fr单位用于图片容器行（1fr依赖内容撑开，不可控）
移动端要额外防滚动条宽度吃空间
iOS 和部分 Android 浏览器滚动时会临时隐藏滚动条，导致容器宽度突变，图片和文字跟着右偏——这不是图片加载问题，但常被误判。
解决方式不是去掉滚动条，而是预留空间：
- 给滚动容器加
overflow-gutter: stable（新标准，支持度有限） - 更通用的写法：
padding-right: calc(100vw - 100%);动态补偿滚动条宽度 - 或者直接用
body { margin: 0; }+html { overflow-y: scroll; }强制滚动条常驻
真正难处理的，其实是背景图加载慢 + 字体加载慢 + 容器尺寸未约束这三者叠加。单点修复容易漏掉连锁反应，得一起压住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
