用 padding-bottom 百分比（基于父宽）配合 relative/absolute 布局可提前声明容器高度，避免图片加载抖动；padding-bottom 不能加在 img 上，须作用于块级外层 div，内层 img 绝对定位填充，并精确计算宽高比百分比值。
直接用 padding-bottom 百分比 + position: relative / absolute 组合，就能在图片加载前撑开容器高度，彻底避免抖动。关键不是“加 padding”，而是理解它怎么被计算、在哪加、以及为什么不能加在 img 上。
padding-bottom 百分比到底相对于谁计算？
它永远基于**父元素的宽度**，不是自身宽度，也不是父元素高度。这是整个方案能成立的前提——因为页面流中宽度通常稳定（比如 width: 100%），而高度往往依赖内容，容易塌陷。
- 若父容器宽 400px，
padding-bottom: 56.25%→ 实际留出 225px 高度空间 - 这个 225px 是“占位”出来的，不是靠 height，所以不触发重排循环
- 错误写法：
height: 56.25%—— 父元素若无显式高度，该值无效，容器直接塌成 0
为什么必须用 relative + absolute 套两层？
因为 padding-bottom 只有在块级、非替换元素（如 div）上才能可靠撑高；而 img 是替换元素，对其设 padding-bottom 不会改变容器高度，且可能被忽略。
- 外层
div：设position: relative+padding-bottom，负责预留空间 - 内层
img：设position: absolute+top: 0; left: 0; width: 100%; height: 100%，填满预留区域 - 务必加
object-fit: cover或contain，否则拉伸变形
宽高比怎么算才不抖？常见比例别四舍五入
百分比值 = (图片高度 ÷ 图片宽度) × 100%，必须精确。浏览器不会帮你四舍五入，差 0.1% 就可能让底部露白或裁切。
立即学习“前端免费学习笔记（深入）”；
-
16:9→56.25%（不是56%） -
4:3→75% -
1:1→100% -
750×300（常见设计稿）→40%（300 ÷ 750 = 0.4）
现代替代方案和兼容性提醒
aspect-ratio: 16/9 是更简洁的解法，但 IE 完全不支持，iOS Safari ≤ 15.4 也不支持。线上项目仍需 fallback。
- 推荐写法：
aspect-ratio: 16/9; padding-bottom: 56.25%，后者作为降级 - 注意：如果用了
box-sizing: border-box，padding-bottom仍有效，但它影响的是内容区高度，不影响总高——这点和content-box下行为一致，无需额外调整 - 别忘了给外层加
overflow: hidden，防止子元素溢出破坏布局
最容易被忽略的是：padding-bottom 占位只对块级容器生效，且必须配合绝对定位图片；任何试图把 padding 加在 img 标签本身、或用 height 百分比替代的做法，都会在某个环节失效。抖动问题本质是高度不可预测，解决它的核心永远是“提前声明高度”，而不是“等它加载完再算”。
