padding-top百分比基于父容器宽度计算，用于实现宽高比锁定；需配合height:0、position:absolute等使内容脱离文档流，避免比例失效。
为什么用 padding-top 百分比能撑开容器高度
浏览器解析 padding-top（或 padding-bottom）的百分比值时，是相对于父容器的 宽度 计算的，而不是高度。这个特性被用来制造“宽高比锁定”效果：只要父容器宽度可变，设置 padding-top: 56.25%（16:9）就能让内边距高度随宽度等比缩放。
关键前提是：内容区域必须脱离文档流，否则 padding 会被内容顶开，比例就失效了。
- 必须把图片设为
position: absolute或用transform脱离流 - 父容器需设
position: relative作为定位上下文 -
height: 0是常见配合手段，清空默认高度干扰 - 不推荐用
margin-top替代 —— 它在某些 flex/grid 环境下行为不稳定
标准响应式图片容器写法（含 4:3 / 16:9 / 1:1）
不同比例只需改一个数字。下面是最小可用结构，无 JS、无额外 wrapper：
.aspect-16x9 {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
}
.aspect-4x3 {
padding-top: 75%; /* 3 ÷ 4 = 0.75 */
}
.aspect-1x1 {
padding-top: 100%;
}
.aspect-16x9 img,
.aspect-4x3 img,
.aspect-1x1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，按需选 */
}
注意：object-fit 在 IE 中不支持，如需兼容 IE，得用 background-image + background-size: cover 方案替代 img 标签。
遇到 img 加载闪动或错位怎么办
常见于 SSR 或首屏渲染场景：HTML 直出时图片还没加载，img 默认有 intrinsic 尺寸，会短暂撑开容器，破坏 padding 占位效果。
- 给
img加width="0" height="0"属性（非 CSS），抑制浏览器预设尺寸 - 或者加
loading="lazy"并配合decoding="async"减少阻塞 - 更稳妥的做法是用伪元素占位：
::before { content: ""; display: block; padding-top: 56.25%; }，再把img绝对定位盖上去 - 避免在
img上直接设max-width: 100%—— 它可能和position: absolute冲突导致缩放异常
Flex/Grid 布局里 padding-top 失效的典型原因
当父容器是 display: flex 或 display: grid 时，padding-top 百分比仍按宽度计算，但容器本身可能被 flex item 的 align-items 或 grid 的 align-content 拉伸/压缩，导致视觉比例偏移。
- 确保父容器没有
align-items: stretch（flex 默认值）以外的拉伸行为 - 如果父是 grid，检查是否有
grid-template-rows: 1fr类设定，它会覆盖 padding 高度 - 简单解法：外层再包一层普通
div专做 aspect-ratio 占位，内部 flex/grid 只负责排列内容 - CSS 新属性
aspect-ratio: 16/9已在 Chrome 88+ / Firefox 89+ 支持，但 Safari 15.4+ 才稳定，老项目慎用
真正麻烦的不是怎么写，而是得时刻记住：padding 百分比只认父宽，不认父高；而人眼看到的“比例”，依赖的是渲染后的实际像素比 —— 这中间差了一个 layout timing 和盒模型理解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
