图片加载抖动本质是重排，因未加载时img宽高为0，资源就绪后尺寸突变触发layout→paint→composite；用aspect-ratio+width可提前预留空间，需配合width:100%及object-fit，旧版浏览器可用padding-top降级，同时HTML中保留width/height属性并避免height:auto覆盖aspect-ratio。
图片加载抖动的本质是重排（reflow）
浏览器在图片未加载完成时，<img> 默认宽高为 0，等图片资源就绪后才撑开容器，触发 layout → paint → composite 流程。这个尺寸突变会强制重排，尤其在 flex/grid 容器中，可能带动周围元素跳动，视觉上就是“抖动”。
用 aspect-ratio + width 固定宽高比
现代 CSS 提供了原生解法：aspect-ratio 允许你声明宽高比，配合 width 或 max-width 即可提前预留空间，无需 JS 或 padding-top hack。
常见错误是只写 aspect-ratio: 16/9 却没设宽度，此时元素仍无实际渲染尺寸；必须搭配明确的块级宽度约束：
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
注意：aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持良好；旧版需降级 fallback。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
降级方案：用 padding-top 百分比占位
对不支持 aspect-ratio 的环境（如老版 iOS Safari），用伪元素或内联 padding-top 模拟宽高比占位：
-
padding-top值 = (高度 ÷ 宽度) × 100%，例如 4:3 图片 →padding-top: 75% - 图片需绝对定位在父容器内，并设
top: 0; left: 0; width: 100%; height: 100% - 父容器要设
position: relative，且不能有height硬编码（否则破坏响应性）
这种写法兼容 IE9+，但维护成本略高，建议仅用于需要支持较老环境的项目。
别忽略 loading="lazy" 和尺寸属性的协同
即使用了 aspect-ratio，如果图片没写 width 和 height 属性（HTML 属性，非 CSS），部分浏览器（尤其是 Chrome）在 LCP 计算或懒加载时仍可能短暂闪动。所以最佳实践是：
- HTML 中保留
width和height属性（值为原始像素尺寸，如width="800" height="450"） - CSS 中用
aspect-ratio覆盖比例逻辑，同时设width: 100%控制响应式缩放 - 加上
loading="lazy"，但确保它不和height: auto冲突（后者会覆盖aspect-ratio效果）
真正容易被忽略的是：当使用 object-fit 时，height 属性若设为 auto，会直接让 aspect-ratio 失效 —— 必须显式设 height: 100% 或依赖父容器高度约束。
