用 padding-bottom 实现宽高比裁剪是因为其百分比值基于父容器宽度计算，可纯 CSS 锁定比例；需配合 position: relative 与绝对定位子元素，并用 object-fit: cover 实现居中裁剪。
为什么用 padding-bottom 实现宽高比裁剪
因为 CSS 中 padding 的百分比值是相对于父容器宽度计算的，哪怕它是个“垂直方向”的属性。这个特性让开发者能用纯 CSS 锁定一个固定宽高比，而无需 JS 或 aspect-ratio（兼容性不足时）。
典型场景：卡片封面图、轮播图、头像容器——要求图片不拉伸、居中裁剪、且在不同屏幕下保持比例一致。
常见错误现象：height: 56.25%; 不生效（百分比高度在无显式高度父元素下无效），或直接写 height: 0; padding-bottom: 56.25%; 却忘了设 position: relative 和子元素定位方式。
- 必须给父容器设
position: relative - 子元素（如
<img alt="CSS如何实现响应式的图片比例裁剪_利用padding-bottom技巧" >或<div>）需绝对定位并撑满容器：<code>position: absolute; top: 0; left: 0; width: 100%; height: 100% - 图片本身建议用
object-fit: cover实现裁剪，而非背景图（后者不易语义化和 SEO） - 移动端可叠加媒体查询改比例，比如小屏用
padding-bottom: 100%（正方形） - 避免在父容器上同时设
height和padding-bottom，否则高度冲突 - 若父容器宽度由
max-width限制，padding-bottom仍按实际渲染宽度计算，没问题
padding-bottom 的数值怎么算
目标宽高比 → 算出高度占宽度的百分比。例如 16:9 → 9 / 16 = 0.5625 → 56.25%；4:3 → 3 / 4 = 75%；1:1 → 100%。
立即学习“前端免费学习笔记（深入）”；
注意：这个值只用于 padding-bottom，不是 height；也别写成小数（0.5625），浏览器会忽略。
响应式要点：该技巧天然响应式——padding-bottom 百分比始终基于父容器当前宽度，缩放时自动调整高度。
与 aspect-ratio 的实际取舍
aspect-ratio: 16 / 9 更直观，但 Safari 15.4 以下、Firefox 89 以下不支持。生产环境若需兼容 iOS 14 或旧安卓 WebView，仍得 fallback 到 padding-bottom 方案。
可以这样渐进增强：
img-container {
aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 1 / 1) {
img-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
img-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}注意：@supports 检测的是属性支持，不是浏览器版本；别用 not (aspect-ratio) 这种写法（语法错误），必须带值。
图片内容居中裁剪的关键细节
仅靠 padding-bottom 只控制容器比例，图片是否“居中裁剪”取决于子元素样式。最简方案是：
- 用
<img alt="CSS如何实现响应式的图片比例裁剪_利用padding-bottom技巧" >标签 +object-fit: cover; object-position: center; - 如果必须用背景图，
background-size: cover; background-position: center;同样有效，但失去alt和懒加载能力 - 避免对
<img alt="CSS如何实现响应式的图片比例裁剪_利用padding-bottom技巧" >设width: 100%; height: 100%—— 它会拉伸，要配合object-fit - IE 不支持
object-fit，需额外 polyfill 或降级为背景图（慎用）
真正容易被忽略的是：当图片原始尺寸远小于容器时，object-fit: cover 会导致图片被放大模糊。此时应优先保证图片分辨率，或服务端返回适配尺寸的资源。
