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>、<video>、<div>）都被覆盖，避免嵌套多层导致定位失效
Less/Sass 中避免魔法数字：用 mixin 或变量封装
硬写 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、子元素是不是真的直接子代——这些地方一错，整个比例就垮了。
