解决图片cls需三招：一、在img直接父容器设aspect-ratio+overflow:hidden并配display:block；二、关键图用背景图替代，配min-height和绝对定位文字层；三、grid-auto-rows用minmax()，禁用lazy加载未预留空间的图片。
图片加载导致布局偏移（CLS）几乎全是因容器没预留尺寸——<img> 一加载，高度从 0 突变，Grid 行轨道重算，旁边所有元素跟着跳。解决它不靠 JS 监听，靠三件事：锁容器高、换背景图、控字体度量。
给 <img> 父容器设 aspect-ratio
aspect-ratio 必须写在 <img> 的**直接父容器**上，写在 <img> 自身无效（浏览器会忽略）。Grid 项只管轨道，不管子元素内容高矮。
-
aspect-ratio: 16 / 9+overflow: hidden锁死空间，<img>只需width: 100%; height: 100%; object-fit: cover; - 别漏掉
display: block，否则 inline 默认基线对齐会留底部缝隙 - 旧 Safari（iOS 15.4 前）用
::before+padding-top: 56.25%fallback，但前提是父容器宽度已被 Grid 列定义好
用 background-image 替代 <img> 标签
只要 <img> 还在文档流里，就可能触发重排。换成背景图，视觉保留，布局彻底解耦。
- 每个 Grid item 设
background-image、background-size: cover、background-position: center - 必须配
min-height: 300px（值要覆盖所有断点下的最小可读高度），不能只靠height: auto - 文字层用
position: absolute叠加，加z-index和响应式padding，避免干扰流 - 注意：
background-image不被屏幕阅读器识别，关键图文内容仍需保留<img>+alt
确保 grid-auto-rows 不塌缩也不裁剪
写死 grid-auto-rows: 200px 容易裁文字；写 auto 又让空卡片塌成 0 高，下方内容上跳。
- 优先用
grid-auto-rows: minmax(200px, auto)，保证最低高度，又允许文字撑开 - 若内容高度差异大，改用
min-height+grid-template-rows: repeat(3, minmax(200px, auto)) - 检查媒体查询里是否误把
display: grid改成flex或block——这种 display 变更会销毁合成层，抖动比图片加载还剧烈
别被 loading="lazy" 欺骗
loading="lazy" 只控制加载时机，不解决占位问题。首屏外的图片进入视口前仍是 0×0，滚动中突然加载，肉眼可见“一跳”。
- 关键图（如 banner、头像）坚决不加
loading="lazy" - 非关键图加 lazy 前，必须确保其父容器已通过
aspect-ratio或min-height预留空间 - Vite 构建时若未正确解析
srcset中相对路径，上线后 404 fallback 到单张大图，反而加剧抖动——要检查构建产物中图片 URL 是否完整
真正容易被忽略的是：字体加载抖动和 Grid 容器 display 状态。哪怕图片全锁死了，@font-face 缺少 ascent-override，或 font-display: swap 没配 <link rel="preload">，标题照样右移几像素，CLS 直接超标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
