padding-top百分比能锁定宽高比，因其值按父容器宽度计算而非高度，如16:9时设56.25%即得“高度=宽度×0.5625”；必须配合position:relative、width:100%和子元素absolute定位填满，否则height百分比失效或容器塌陷。
padding-top 百分比为什么能锁定宽高比
因为 padding-top 的百分比值是按父容器**宽度**计算的，不是高度。设 padding-top: 56.25%，就等于“高度 = 父容器宽度 × 0.5625”，天然形成 16:9 比例。这个行为是 CSS 规范定义的，不是 hack，也不依赖 JS。
常见错误现象：height: 56.25% 不生效、容器高度塌陷、视频被拉伸或上下留黑边——根本原因是把比例逻辑错加在 height 上，而浏览器对相对高度（height: x%）的解析要求父元素有明确高度，这在响应式场景里几乎无法满足。
必须写的三行核心 CSS
最简可靠写法只有这三行，少一行都可能失效：
-
position: relative—— 给外层容器，为子元素absolute提供定位上下文 -
width: 100%—— 确保有明确宽度基准，否则padding-top算出来是 0 -
padding-top: 56.25%—— 数值 = 高 ÷ 宽 × 100，16:9 就是9 / 16 * 100
别给这个容器设 height，哪怕 height: auto 也不行——它会覆盖 padding-top 生成的高度。
立即学习“前端免费学习笔记（深入）”；
子元素怎么填满整个比例空间
直接子元素（比如 <iframe> 或 <video>）必须用 position: absolute 覆盖整个区域，否则它只会流式排布在 padding-top 留出的空白上方，视觉上“看不见”高度。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
推荐写法：
.ratio-container > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}注意：inset: 0 是 top: 0; right: 0; bottom: 0; left: 0 的简写，现代项目（Chrome 57+ / Firefox 55+）足够兼容；如果要支持 IE 或老 Android WebView，改用 top: 0; left: 0; width: 100%; height: 100%。
如果子元素是 <img>，记得加 object-fit: cover 或 contain，否则默认拉伸变形；<video> 和 <iframe> 同样需要，不然可能溢出或留黑边。
Flex/Grid 布局里容易失效的几个点
当比例容器嵌在 display: flex 或 display: grid 里时，padding-top 百分比常被忽略或算错，不是代码写错了，而是宽度上下文丢失了。
典型问题和应对方式：
- Flex 容器中子项没设
flex: none→ 它会尝试弹性拉伸，压制width: 100%效果，加flex: none或min-width: 0 - Grid 子项没设显式宽度 →
padding-top虽然按轨道宽度算，但若轨道是fit-content，实际宽度可能意外截断，建议加width: 100%显式声明 - 父级用了
flex: 1却没设width→ iOS Safari 可能算出padding-top: 0，必须补min-width: 0
最稳的做法：把比例容器当成独立布局单元，别让它成为多层嵌套中“被挤压”的一环。复杂嵌套下，aspect-ratio 虽然简洁，但和 padding-top 混用会导致冲突，选一个坚持到底就行。
