图片跳闪本质是加载前容器无尺寸导致布局重排，用aspect-ratio:16/9配合width:100%可提前预留空间；老浏览器降级用padding-top+绝对定位；需删HTML宽高属性，禁用固定像素值，配合max-width与object-fit确保响应式稳定。
图片加载前如何占满容器位置
跳闪本质是图片还没加载完，浏览器按默认尺寸（0×0 或内联宽高）渲染，等图片就绪又突然撑开布局。关键不是“等图片”，而是让容器提前知道图片该占多大地方。
用 aspect-ratio 是最直接的解法：它让容器按比例预留空间，不管图片是否加载完成。
-
aspect-ratio: 16 / 9比写死height更安全，适配不同屏幕宽度 - 必须配合
width: 100%或max-width: 100%，否则aspect-ratio不生效 - IE 和旧版 Safari 不支持，需要降级方案（见下一条）
兼容老浏览器的 padding-top 占位技巧
当 aspect-ratio 不可用时，用 padding-top 配合绝对定位仍是可靠方案，但容易漏掉关键约束。
- 父容器设
position: relative，否则子元素position: absolute会脱出上下文 - 图片本身要设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则可能被裁或拉伸 -
padding-top值 = (高度 ÷ 宽度) × 100%，比如 4:3 图片写padding-top: 75% - 别忘了加
object-fit: cover或contain控制图片缩放行为
为什么 width 和 height 属性反而加剧跳闪
在响应式场景下，给 <img> 写固定 width 和 height（尤其是像素值）会干扰流式布局，导致加载时尺寸错乱。
立即学习“前端免费学习笔记（深入）”；
- HTML 中的
width="600" height="400"会被浏览器当作初始渲染尺寸，不随 CSS 缩放，容易溢出容器 - CSS 里写
width: 100%; height: auto是基础，但没解决“空白期”问题——这正是跳闪发生的时间窗 - 现代做法是删掉 HTML 的
width/height属性，全交给 CSS 的aspect-ratio+max-width管理
loading="lazy" 和跳闪有关系吗
有，但不是因果关系。懒加载本身不引发跳闪，但它放大了占位缺失的问题——因为图片更晚进入视口，留白时间更长。
- 开启
loading="lazy"后，务必确保容器已有稳定尺寸（靠aspect-ratio或 padding 技巧） - 别依赖 JS 动态计算图片尺寸再注入 style，首屏渲染阶段 JS 还没执行，空白期照旧
- 如果用
IntersectionObserver手动控制加载，记得在 observe 前就给容器设好 aspect ratio
max-width 和图片的 width: 100% 必须同时存在，缺一不可。前者防溢出，后者保填充，中间没有“自动居中”或“智能拉伸”这种魔法。 
