padding-bottom百分比能撑开容器是因为其值基于父容器宽度计算，配合position:relative与absolute可实现宽高比占位；需用外层div设padding-bottom和relative，内层img设absolute填满，并配object-fit防变形；现代浏览器可用aspect-ratio:16/9替代，但旧版需fallback。
padding-bottom百分比为什么能撑开容器
因为 padding-bottom 的百分比值是相对于**父容器宽度**计算的，不是高度。只要提前知道图片宽高比（比如 16:9 → 高度 = 宽度 × 9/16），就能用 padding-bottom: 56.25% 模拟出等比例留白空间，让容器在图片加载前就具备正确高度，避免布局跳动。
常见错误是直接写 height: 56.25% —— 这依赖父元素有明确高度，而多数情况父元素高度由内容撑开，形成循环依赖，结果就是 padding 不生效、容器塌陷、图片加载后突然下压页面。
- 只对
position: relative的父容器 +position: absolute的图片子元素有效 - 必须禁用图片默认的
display: inline行内行为，否则 vertical-align 会干扰对齐 - 宽高比要精确：16:9 是
56.25%，4:3 是75%，1:1 是100%，别四舍五入成56%
HTML结构怎么写才不崩
核心是「外层占位、内层绝对定位」。不能把 padding-bottom 加在图片本身上，而是加在一个空的包裹容器上，再把图片用 position: absolute 塞进去填满。
典型错误结构：<img style="padding-bottom: 56.25%"> —— padding 对替换元素（如 img）无效，且不会触发高度预留。
立即学习“前端免费学习笔记（深入）”；
- 外层
<div class="aspect-ratio-box">设position: relative和padding-bottom - 内层
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 如果图需响应式，外层用
width: 100%，别设固定宽高
<div class="aspect-ratio-box" style="position: relative; padding-bottom: 56.25%"> <img src="photo.jpg" alt="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover"> </div>
object-fit和vertical-align容易搞混
object-fit 控制图片如何适应容器（类似 background-size），vertical-align 只对行内元素或表格单元格生效。当图片设了 position: absolute，vertical-align 就完全失效了，别浪费时间调它。
常见坑：没加 object-fit: cover 或 contain，导致图片被拉伸变形；或者误以为 vertical-align: middle 能居中，结果毫无反应。
-
object-fit: cover适合封面图，裁剪但保持比例 -
object-fit: contain适合图标或需要完整展示的图 - 若用
img标签，必须配合height: 100%才能生效；SVG 或背景图另有一套规则
要不要用 aspect-ratio 替代 padding 方案
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持原生 aspect-ratio 属性，写法极简：aspect-ratio: 16 / 9。但它不能解决所有场景——比如你需要兼容 IE 或旧版 Safari，或者容器需要根据图片实际尺寸动态算比值（如 CMS 后台上传任意比例图）。
错误认知：以为 aspect-ratio 一加就万事大吉。它不触发重排保护，也不自带 loading 占位逻辑，图片加载失败时容器仍会塌陷。
- 纯新项目且无需兼容旧浏览器，优先用
aspect-ratio - 需要 fallback 或服务端无法预知宽高比时，padding-bottom 方案更可控
- 注意：
aspect-ratio对 flex/grid 子项行为有细微差异，某些嵌套下需额外设min-width: 0
position: relative，或者忘了把图片设成 absolute —— 这两个缺一不可，否则 padding 白写。 
