图片布局跳动的本质是未预留空间，解决核心是提前固定尺寸：用width/height属性、aspect-ratio或服务端传入宽高；再配合object-fit控制填充、loading="lazy"懒加载及占位背景提升体验。
图片加载慢导致布局跳动，本质是浏览器在图片还没加载完成时不知道它该占多大位置，等图片一进来，高度突然撑开，页面就“抖”一下。解决核心就是：让图片区域提前预留好空间，不等图片来才计算尺寸。
给图片写死宽高（最直接有效）
在 CSS 或 HTML 中明确指定 width 和 height，浏览器就能提前分配好位置，不管图片是否加载，容器尺寸不变。
- 推荐用 CSS 设置：
img { width: 300px; height: 200px; }，比内联 style 更易维护 - 响应式场景下可用
aspect-ratio（现代浏览器支持）：img { aspect-ratio: 4 / 3; width: 100%; height: auto; }，保持宽高比的同时自适应宽度 - 如果后端能返回图片宽高，模板中可动态写入
width和height属性，再配合img { height: auto; }防止拉伸
用 object-fit 控制图片填充方式
固定容器尺寸后，图片可能变形或留白。用 object-fit 让内容按需适配：
-
object-fit: cover;—— 类似背景图的background-size: cover，裁剪显示，适合头图、卡片图 -
object-fit: contain;—— 完整显示，可能有空白，适合图标、证件照等需保真的场景 - 搭配
object-position可微调裁剪区域，比如object-position: center top;
配合 loading="lazy" 和占位符提升体验
光占位还不够，用户滚动到图片附近才加载，更省流量也减少首屏压力：
立即学习“前端免费学习笔记（深入）”；
- 原生懒加载：
- 加简单占位背景：
img { background: #f5f5f5; }或用 base64 微型灰图，视觉上更连贯 - 高级方案可用 CSS 自定义渐变占位：
background: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
慎用 width: 100% + height: auto 的组合
这是常见陷阱：只设宽度、高度靠图片原始比例自动计算，但浏览器要等图片下载解析后才知道高，布局必然抖动。
- 除非配合 JS 动态获取并注入 height（不推荐，增加复杂度和 FOUC 风险）
- 或者用
aspect-ratio替代height: auto，它是 CSS 原生的宽高比声明，无需图片加载即可生效 - 服务端渲染（SSR）或静态站点生成（SSG）时，务必把宽高作为数据字段传入模板
基本上就这些。关键不是“等图片”，而是“先画框再填图”。宽高占位是基础，配合懒加载和视觉占位，用户几乎感觉不到加载过程。
