应使用 aspect-ratio 或 padding-bottom 预设宽高比占位，避免布局跳动；现代浏览器用 aspect-ratio: 16/9 等，旧版 safari 用 padding-bottom 技巧；表格与瀑布流需额外处理容器定位；无元数据时按业务 fallback 比例；极端情况可 onload 后 js 动态修正。
图片尺寸未知时，不能靠 width/height 属性硬写，但必须提供可预测的占位高度，否则懒加载会引发布局跳动（CLS）。核心思路是：用 CSS 提前锁定容器高宽比，让浏览器知道“这里该留多大空间”，再配合 JS 确认真实尺寸后平滑替换。
用 aspect-ratio + 宽度撑开容器
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，这是最直接的方案。即使原始图片宽高未知，只要知道常见比例（如 16:9、4:3、1:1），就能稳定占位：
- 给
<img>或其父容器设style="max-width:90%"，浏览器自动计算高度 - 避免用
height: auto或百分比高度——它们依赖内容，无法提前占位 - 若需兼容 Safari 15.3 及更早版本，改用 padding-bottom 技巧：
padding-bottom: 56.25%（对应 16:9）
响应式场景下动态推算比例
当图片来自 CMS 或用户上传，连宽高比都不固定时，可借助服务端返回的元数据或客户端预估：
- API 返回图片宽高字段（如
width: 1200, height: 800），JS 渲染时动态设style="aspect-ratio: 1200/800" - 无元数据时，按业务规则 fallback：商品图默认 4:3，头像默认 1:1，横幅图默认 21:9
- 避免用 JS 测量自然尺寸（
naturalWidth）再设高——它要等图片下载，起不到占位作用
表格与瀑布流中的特殊处理
这两类布局对高度稳定性极度敏感，不能只靠 CSS：
- 表格中每个
<td> 内的 <code><img>必须设style="max-width:90%"，防止 td 高度塌缩或突变 - 瀑布流用
padding-bottom占位（如padding-bottom: 66.67%对应 3:2），包裹容器用position: relative，图片绝对定位覆盖 - 加载完成且
img.naturalWidth > 0后，再移除占位类、添加 fade-in，避免 opacity 动画触发错位 - 初始设一个安全默认高（如
min-height: 120px或height: 15vh） - 监听
img.onload，读取naturalWidth / naturalHeight，反算实际比例 - 用 JS 动态更新父容器
style.aspectRatio或paddingBottom，并触发布局重排（仅一次） - 注意：此操作应在 IntersectionObserver 触发后、图片真正进入视口时进行，避免首屏渲染卡顿
兜底：JS 加载后重设容器高度
极端情况下（如完全无法预知比例），可退到“先占位、再修正”策略：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
