HTML中实现固定比例视频容器的padding-top百分比方案-html教程-PHP中文网

因为height百分比依赖父容器显式高度而常失效，padding-top百分比始终基于父宽计算，可稳定生成16:9等比例（如56.25%），需配合position:relative/absolute、height:0及无height设置的块级容器实现。

html中实现固定比例视频容器的padding-top百分比方案

为什么用 `padding-top` 而不是 `height`？

因为 height 的百分比值在块级元素上依赖父容器高度，而父容器往往没有显式高度，导致 height: 56.25% 失效；padding-top 的百分比则始终相对于父容器的宽度计算，正好能稳定生成宽高比（比如 16:9 → 56.25%）。

容器必须是块级元素且有明确宽度（如 width: 100%）
子元素（如 <video></video>）需用 position: absolute 覆盖整个 padding 区域
父容器不能设 height，否则会破坏比例逻辑
常见错误：给容器加 height: 0 却忘了 overflow: hidden，导致视频溢出

`padding-top` 对应的常见宽高比数值

直接记这几个最常用的就行，不用每次算：

16:9 → 56.25%（即 9 ÷ 16 × 100）
4:3 → 75%（3 ÷ 4 × 100）
1:1 → 100%
21:9（超宽屏）→ 42.857%（9 ÷ 21 × 100）

注意：这些值只适用于 padding-top 或 padding-bottom，padding-left/padding-right 百分比也相对宽度，但不用于控制高度。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

完整可运行的 HTML 结构怎么写？

关键点不是“怎么写”，而是“哪些地方不能省”：

外层容器必须设 position: relative，否则 absolute 子元素会脱离上下文
<video></video> 必须设 width: 100%; height: 100%，且 top: 0; left: 0
容器内不能有其他非绝对定位的内容，否则会撑开高度、破坏 padding 效果
若需响应式，直接对容器设 width: 100% 即可，padding 百分比自动适配

<div class="video-container">
  <video controls><source src="demo.mp4" type="video/mp4"></source></video>
</div>
<p><style>
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /<em> 16:9 /
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style></p>

遇到黑边、拉伸或不居中怎么办？

这不是比例错了，而是视频自身属性和 CSS 交互出了问题：

视频默认 object-fit: fill，会拉伸变形 → 改成 object-fit: cover 或 contain
黑边通常因 video 尺寸和容器比例不一致 → 检查源视频分辨率是否匹配（如 16:9 视频放进 4:3 容器必然有黑边）
不居中：给 video 加 object-position: center 配合 cover
移动端 Safari 可能忽略 height: 100% → 加 min-height: 100% 或用 aspect-ratio 回退方案（但那是另一套逻辑）