padding-top百分比可实现固定宽高比，因该值按父容器宽度计算，配合position: absolute子元素填满即可；需父容器有明确宽度、不设height，否则比例失效。
直接用 padding-top 百分比就能实现固定宽高比，前提是父容器有明确宽度、不设 height、子元素用 position: absolute 填满——这是目前兼容性最好、零 JS、纯 CSS 的方案。
为什么 padding-top 百分比能撑出固定比例
CSS 规范里明确定义：padding-top（和 padding-bottom）的百分比值，是按**父容器宽度**计算的，不是高度。比如父宽 400px，padding-top: 56.25% 就等于 225px，刚好是 16:9 的高。你没写 height，浏览器就靠这个 padding 把容器“撑高”，比例自然锁死。
常见错误现象：
-
height: 56.25%完全无效——因为 height 百分比需依赖父容器有显式高度，否则算 0 - 容器高度塌陷或比例错乱——父容器没设
width，或写了height: auto/height: 300px干扰了 padding 计算 - 内容溢出或留白——子元素没用
position: absolute，还在文档流里占位
标准写法：外层定宽 + padding 占高 + 绝对定位内容
以下是最小可行结构，去掉所有冗余样式也能稳住 16:9：
.aspect-16x9 {
width: 100%;
position: relative;
padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
/* 不要写 height */
}
.aspect-16x9 > * {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
关键点：
- 父容器必须有可计算的
width（100%、300px、minmax(300px, 1fr)都行；width: fit-content不行） -
padding-top值 =height ÷ width × 100，正方形是100%，4:3 是75%，别手算错 -
> *确保任意直接子元素（<iframe></iframe>、<video></video>、<div>）都被覆盖，避免嵌套多层导致定位失效<h3>Less/Sass 中避免魔法数字：用 mixin 或变量封装</h3> <p>硬写 <code>56.25%会带来维护风险——改比例时得全局搜索替换。推荐抽成函数：.aspect-ratio(@h: 9, @w: 16) { padding-top: percentage(@h / @w); } .video-container { .aspect-ratio(9, 16); }或者用 CSS 自定义属性 +
calc()动态算：.aspect-ratio { --aspect-w: 16; --aspect-h: 9; padding-top: calc(100% * var(--aspect-h) / var(--aspect-w)); }注意：
calc()在 IE 中不支持，如需兼容 IE11，坚持用预处理器算好再输出。容易被忽略的细节：box-sizing 和图片变形
如果容器里放的是
<img>，光靠padding-top不够：- 默认
box-sizing: content-box，但 padding 本身已计入盒高，一般不用改；若加了border或padding，建议显式写box-sizing: border-box - 图片会被拉伸——必须加
object-fit: cover（或contain），且确保父容器设置了overflow: hidden - 子元素若含文字或按钮，记得重置
font-size或用vw单位做响应式缩放，否则在窄屏下可能溢出
真正麻烦的从来不是写对那几行 CSS，而是忘记父容器有没有 width、有没有悄悄写了 height、子元素是不是真的直接子代——这些地方一错，整个比例就垮了。
- 默认
