padding-top百分比能撑出固定比例是因为其值始终基于父容器宽度计算，如宽400px时56.25%即225px，构成16:9；需同时满足：父容器设position: relative、不设height、子元素absolute填满。
padding-top百分比为什么能撑出固定比例
因为 padding-top 的百分比值，永远按父容器的 width 计算，而不是按高度。比如父容器宽 400px，padding-top: 56.25% 就等于 225px，刚好构成 16:9（400 × 0.5625 = 225）。这个行为是 CSS 规范明确定义的，不是 hack，也不依赖 JS。
必须设的三个样式条件
漏掉任意一个，padding-top 就会失效或比例错乱：
-
position: relative加在父容器上——否则子元素position: absolute会相对于 body 定位，脱离控制 - 父容器不能设
height（尤其不能是像素值）——一旦设了，padding-top的百分比会被忽略或计算异常 - 子元素必须用
position: absolute; top: 0; left: 0; width: 100%; height: 100%填满，且不能有 margin 或 border 干扰尺寸
常见比例对应值别手算错
直接抄这些准确值，避免四舍五入误差导致拉伸：
- 16:9 视频/横屏图 →
padding-top: 56.25%（9 ÷ 16 = 0.5625） - 4:3 图片 →
padding-top: 75%（3 ÷ 4 = 0.75） - 1:1 正方形 →
padding-top: 100% - 3:2 照片 →
padding-top: 66.666666%（推荐写66.6667%或用 calc(2 / 3 * 100%)）
和 aspect-ratio 的关键区别在哪
aspect-ratio 写起来简单，但实际落地时容易踩坑：
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio不要求父容器设position: relative，也不强制子元素绝对定位，但它对内容“零保护”——一段没换行的长文本、一张没加max-width: 100%的图，可能直接撑破容器 -
padding-top方案天然隔离内容，高度完全由 padding 控制，子元素再怎么溢出也不会影响比例 - 需要兼容 IE 或旧版 Safari 时，
aspect-ratio直接不可用，而padding-top方案从 IE6 起就稳定工作
实际项目里，只要容器内内容可控（比如只放 <img alt="怎样在CSS中使用padding-top百分比技巧实现固定宽高比容器？" > 或 <iframe></iframe>），padding-top 是更稳的选择；如果追求简洁且只需支持现代浏览器，aspect-ratio 可以省掉一堆定位代码——但别忘了加 overflow: hidden 防意外撑开。
