用 padding-bottom 实现固定宽高比需设父容器 position: relative、子元素 position: absolute 并填满，padding-bottom 值为高度/宽度比（如 16:9 时为 56.25%），因该属性百分比基于父宽计算，可响应式锁死比例。
图片容器怎么用 padding-bottom 实现固定宽高比
纯 CSS 实现响应式图片容器的固定比例（比如 16:9、4:3），不靠 JS、不用 aspect-ratio（兼容性不够时），核心就是利用 padding-bottom 的百分比值是相对于父容器宽度计算的这一特性。
它本质是“骗”浏览器：把高度变成由宽度驱动的内边距，从而锁死比例。但必须配合绝对定位才能让内容（如 <img alt="CSS内边距在响应式图片中的占比技巧_实现固定比例容器" >）填满这个“虚高”区域。
- 父容器设
position: relative - 子元素（如
<img alt="CSS内边距在响应式图片中的占比技巧_实现固定比例容器" >）设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 用
padding-bottom填出目标高度：比如 16:9 →padding-bottom: 56.25%（9 ÷ 16 = 0.5625）
为什么 padding-bottom 百分比能当高度用
因为 CSS 规范里明确写了：padding-top 和 padding-bottom 的百分比值，始终基于**包含块的宽度**计算，而不是高度。这和 height 或 margin-bottom 的行为完全不同。
这意味着：哪怕你没设父容器高度，只要宽度确定（比如 100%），padding-bottom: 56.25% 就永远等于“当前宽度 × 0.5625”，天然形成响应式高度。
立即学习“前端免费学习笔记（深入）”；
- 这个机制在 IE8+ 都支持，比
aspect-ratio（Chrome 88+ / Firefox 89+）兼容性好得多 - 但注意：如果父容器宽度为 0（比如 flex 子项未设
flex-basis且无内容），padding 计算结果也是 0 - 不要试图用
padding-top替代——效果一样，但语义上bottom更常见，且避免和 margin-top 冲突
常见的错位和图片拉伸问题怎么修
最常出现的现象是：图片溢出、被裁切、上下留白、或者只显示左上角一小块。根本原因几乎都是定位或尺寸控制没对齐。
-
<img alt="CSS内边距在响应式图片中的占比技巧_实现固定比例容器" >必须设display: block，否则底部默认有基线间隙，会撑开容器 - 如果图片本身宽高比 ≠ 容器比例，用
object-fit: cover（裁剪居中）或object-fit: contain（等比缩放留白）来控制呈现方式 - 别给
<img alt="CSS内边距在响应式图片中的占比技巧_实现固定比例容器" >设max-width: 100%同时又设width: 100%—— 后者已足够，前者反而可能触发奇怪的重绘 - 容器若用了
border或outline，记得用box-sizing: border-box，否则 padding 计算会含糊
要不要用 aspect-ratio？什么时候换
如果你的项目只需支持 Chrome 88+、Firefox 89+、Safari 15.4+，那 aspect-ratio: 16 / 9 是更干净的选择：无需 hack、无需绝对定位、语义清晰、支持动态值（比如 aspect-ratio: attr(data-ratio)）。
- 但 Safari 15.3 及更早版本完全不识别，iOS 15.3 也 fallback 失败
- 如果要兼容微信内置浏览器（多数仍基于旧版 X5 内核），
padding-bottom方案仍是事实标准 - 可以双写：先写
aspect-ratio，再写padding-bottom降级；但注意某些老浏览器会因不认识aspect-ratio而忽略整条规则（需测试）
真正容易被忽略的是：padding-bottom 方案里，容器内部如果有其他非绝对定位子元素，它们会把 padding 当作真实空间参与流式布局——这时候得额外清理，不然结构就乱了。
