在网页中嵌入视频时，如果直接设置固定的宽高数值，当屏幕尺寸变化或者容器大小调整时，视频很容易出现拉伸、压缩、比例失调的情况，影响用户的观看体验。那么HTML视频宽高比例怎么固定？下面给大家介绍几种经过实践验证的实用技巧。
方法一：使用padding-top百分比技巧
这是兼容性最好的一种方法，原理是利用padding-top的百分比是相对于父容器宽度计算的特性，提前预留出对应比例的高度空间，再把视频绝对定位到这个空间里。
比如常见的16:9比例，计算方式是9/16*100%=56.25%，如果是4:3比例就是3/4*100%=75%。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.video-container {
width: 100%; /* 容器宽度可以根据需求调整 */
position: relative;
padding-top: 56.25%; /* 16:9比例对应的百分比 */
background-color: #000;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 保证视频完整显示不裁剪 */
}
</style>
</head>
<body>
<div class="video-container">
<video src="test.mp4" controls></video>
</div>
</body>
</html>方法二：使用CSS aspect-ratio属性
现代浏览器已经支持aspect-ratio属性，可以直接指定元素的宽高比，不需要额外的padding计算，写法更简洁。
该属性目前支持Chrome、Firefox、Edge等主流现代浏览器，如果需要兼容旧版本浏览器，建议搭配方法一作为降级方案。
/* 16:9比例视频样式 */
.video-16-9 {
width: 100%;
aspect-ratio: 16 / 9; /* 直接指定宽高比为16:9 */
}
/* 4:3比例视频样式 */
.video-4-3 {
width: 100%;
aspect-ratio: 4 / 3;
}<video class="video-16-9" src="test.mp4" controls></video>
方法三：使用object-fit属性适配容器
如果视频的容器大小已经固定，但是视频本身的比例和容器不一致，可以使用object-fit属性来控制视频的填充方式，避免拉伸变形。
object-fit有几个常用取值：
- contain：保持视频原有比例，完整显示在容器内，可能会有留白
- cover：保持视频原有比例，填满整个容器，超出部分会被裁剪
- fill：拉伸视频填满容器，会破坏原有比例，不建议使用
.video-box {
width: 800px;
height: 450px; /* 800*450正好是16:9比例 */
overflow: hidden;
}
.video-box video {
width: 100%;
height: 100%;
object-fit: contain; /* 视频完整显示，比例不变 */
/* 如果需要填满容器不裁剪，换成object-fit: cover */
}不同方法适用场景对比
可以根据实际需求选择合适的方法，下面是各方法的特性对比：
| 方法 | 兼容性 | 实现难度 | 适用场景 |
|---|---|---|---|
| padding-top百分比 | 所有浏览器 | 中等 | 需要兼容旧浏览器、响应式布局 |
| aspect-ratio属性 | 现代浏览器 | 低 | 仅面向现代浏览器用户、快速开发 |
| object-fit适配 | IE9及以上 | 低 | 容器大小固定、需要调整视频填充方式 |
注意事项
1. 尽量不要同时给<video>标签设置固定的width和height属性，这会优先覆盖CSS的样式设置，导致比例固定失效。
2. 如果需要兼容IE浏览器，object-fit属性不支持，需要额外引入polyfill脚本或者改用padding-top方法。
3. 视频本身的原始比例如果和设置的目标比例差异过大，即使固定了容器比例，视频也可能出现模糊的情况，建议提前统一视频的录制比例。
HTML_video宽高比固定object-fit响应式视频视频比例保持修改时间：2026-05-29 22:31:14