HTML视频固定比例设置方法

在响应式网页设计中，保持HTML视频的固定宽高比（如16:9或4:3）至关重要，否则易导致变形、布局错乱或视觉体验割裂；本文详解两种核心方案——兼容性极佳的CSS `padding-bottom` 技巧（通过百分比内边距模拟高度，实现等比缩放）与更简洁现代的 `aspect-ratio` 属性（原生支持宽高比定义，推荐用于新项目），并补充了对原生 `

在HTML中嵌入视频时，保持固定的宽高比（比如16:9或4:3）非常重要，尤其是在响应式设计中。如果不做处理，视频在不同设备上容易变形或布局错乱。以下是几种实用方法来固定视频的宽高比例。

使用CSS的padding-bottom技巧

这是最常用且兼容性好的方式，通过利用 padding-top 或 padding-bottom 的百分比基于父容器宽度计算 的特性，实现等比缩放。

示例：创建一个16:9的视频容器

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
</div>

CSS样式：

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; / * 9 ÷ 16 = 0.5625，即16:9的比例 * /
}
<p>.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}</p>

说明：设置容器高度为0，用 padding-bottom 模拟高度，这样无论屏幕多宽，iframe 始终保持16:9比例。

使用aspect-ratio属性（现代浏览器推荐）

CSS新增的 aspect-ratio 属性可以直接定义宽高比，更简洁直观。

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
<p>.video-container video {
width: 100%;
height: 100%;
object-fit: cover; / <em> 可选：裁剪填满 </em> /
}</p>

注意：该属性在较老版本浏览器（如IE）中不支持，需考虑兼容性。可用作渐进增强方案。

控制原生video标签的比例

对于本地视频文件，使用 标签时，建议只设置宽度，让高度自动适应，避免拉伸。

<video controls style="width: 100%; height: auto;">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

配合CSS限制最大宽度：

video {
  max-width: 800px;
  height: auto;
}

这样能确保视频按原始比例缩放，不会超出容器。

常见宽高比参考值

• 16:9 - padding-bottom: 56.25%
• 4:3 - padding-bottom: 75%
• 21:9 - padding-bottom: 42.86%
• 1:1 - padding-bottom: 100%

根据实际需求选择对应比例即可。

基本上就这些。推荐优先使用 aspect-ratio（现代项目），兼顾兼容性则用 padding-bottom 方案。关键是不让视频脱离原始比例，保证视觉体验一致。

好了，本文到此结束，带大家了解了《HTML视频固定比例设置方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！