padding-bottom配合position:relative和absolute可稳定维持宽高比，因padding-bottom百分比按父宽计算，子元素需absolute定位并设满四边以填满容器。
直接用 padding-bottom 配合 position: relative 和 position: absolute，就能让容器在宽度变化时自动维持宽高比，内部内容也能等比例缩放——这是目前兼容性最好、最稳定的方案，比依赖 aspect-ratio 更可靠。
为什么 padding-bottom 百分比能撑出固定高度
CSS 中 padding-top 和 padding-bottom 的百分比值，永远按父元素的 宽度 计算，而不是高度。这个行为不是 bug，是规范定义的特性。比如父容器宽 400px，设 padding-bottom: 75%，实际就是 300px 高度，刚好构成 4:3 宽高比。
- 这个计算不依赖内容，所以图片/视频还没加载时，容器也不会“塌陷”或闪烁
- 不能用
height: 75%替代，因为它的百分比是相对于父元素高度，而父元素高度此时往往是 0 -
margin-bottom同样按父宽计算，但会脱离文档流影响布局，padding更安全
常见宽高比对应的 padding-bottom 值怎么算
公式就一个：padding-bottom = (height ÷ width) × 100%。别背数字，现场除一下更快更准。
-
16:9→9 ÷ 16 = 0.5625→padding-bottom: 56.25% -
4:3→3 ÷ 4 = 0.75→padding-bottom: 75% -
1:1→1 ÷ 1 = 1→padding-bottom: 100% -
3:4（竖版图）→4 ÷ 3 ≈ 1.3333→padding-bottom: 133.33%
注意：别写成 padding: 0 0 56.25% 0，必须是 padding-bottom 单独设置，否则可能被其他方向 padding 干扰。
为什么子元素必须用 position: absolute
父容器靠 padding-bottom “撑高”，但它的内容区域（content box）高度其实是 0。如果子元素用默认的 static 定位，它会从 content box 开始渲染，结果就是悬在 padding 上方，甚至溢出。
- 设
position: absolute后，子元素脱离文档流，可精准贴住父容器四边 - 必须同时设
top: 0; left: 0; width: 100%; height: 100%，否则无法填满 - 如果内容需要居中，推荐在子元素内用
display: flex; align-items: center; justify-content: center，别依赖vertical-align
容易忽略的兼容性和结构陷阱
这套方案在 IE9+、所有现代浏览器都稳，但有几个细节一错就白搭：
- 父容器不能设
height（哪怕是height: auto），否则会覆盖 padding 撑起的高度 - 父容器必须有明确宽度来源，比如
width: 100%、max-width: 800px或flex: 1，否则padding-bottom失效 - 如果用
<img>，记得加width: 100%; height: 100%; object-fit: cover，否则拉伸变形 -
aspect-ratio虽然写法简单，但在 Safari 15.4 之前、旧版 Edge 等环境不支持，上线前务必查 caniuse
真正难的不是写出这十几行 CSS，而是理解 padding 百分比和定位之间的配合逻辑——一旦漏掉 position: relative 或忘了设 height: 100%，整个容器就“看不见”了，调试时得一层层检查渲染树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
