padding-top百分比是最可靠方式，因它按父容器宽度计算高度，天然实现宽高比；需配合width:100%、height:0和position:relative三行核心css，子元素用absolute填满。
直接用 padding-top 百分比是最可靠、兼容性最好的方式，不需要 JS，也不依赖父容器高度——只要父容器有明确宽度（比如 width: 100%），就能锁定宽高比。
为什么 padding-top 百分比能撑开高度
因为 padding-top 的百分比值是按父容器的 宽度 计算的，不是高度。设 padding-top: 56.25%，实际就是“高度 = 父容器宽度 × 0.5625”，天然形成 16:9 比例。这不是 hack，是 CSS 规范行为。
常见错误现象：height: 56.25% 不生效、卡片塌陷、内容被顶出可视区——根本原因是把比例逻辑错加在 height 上，而 height 百分比需要父元素有明确高度，这在响应式布局里几乎不可能满足。
-
padding-top或padding-bottom都可以，选哪个取决于你希望内容从顶部还是底部开始定位 - 必须配合
height: 0，否则内容自身高度会干扰 padding 占位 - 别给容器设
min-height、line-height或font-size，它们可能意外影响计算
必须写的三行核心 CSS
少一行都可能失效：
-
position: relative—— 给外层容器，为子元素absolute提供定位上下文 -
width: 100%—— 确保有明确宽度基准；如果是 flex/grid 子项，还要加flex: none或min-width: 0 -
padding-top: 56.25%—— 数值 = 高 ÷ 宽 × 100，16:9 就是9 / 16 * 100；4:3 是75%，1:1 是100%
绝对不要写 height，哪怕 height: auto 也不行——它会覆盖 padding-top 生成的高度。
子元素怎么填满整个比例空间
直接子元素（比如 <img>、<video></video> 或 <div>）必须脱离文档流，否则只会排布在 padding 留出的空白上方，视觉上“看不见”高度。<p>推荐写法：</p>
<pre class="brush:php;toolbar:false;">.ratio-container > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}</pre>
<p>注意：<code>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></video>和<iframe></iframe>同样需要object-fit或等效控制，不然可能溢出或留黑边 - 如果卡片内有文字或按钮，建议再套一层
position: relative的 wrapper，避免绝对定位内容遮挡交互
嵌在 Flex/Grid 里时容易失效的点
当比例容器作为 display: flex 或 display: grid 的子项时，padding-top 百分比常被忽略或算错，不是代码错了，而是宽度上下文丢失了。
- Flex 子项没设
flex: none→ 它会尝试弹性拉伸，压制width: 100%效果，加flex: none或min-width: 0 - Grid 子项没设显式宽度 → padding 虽然按轨道宽度算，但若轨道是
fit-content，实际宽度可能意外截断，建议加width: 100% - 如果父容器用了
max-width，确保子比例容器也继承该约束，否则在大屏下可能过宽
真正麻烦的不是写法本身，而是宽度上下文在嵌套布局中层层衰减——每多一层 flex/grid，就要多确认一次宽度是否被正确传递。
