HTML固定视频宽高比技巧

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《HTML视频宽高比固定方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

使用CSS的padding-bottom技巧或aspect-ratio属性可固定视频宽高比，推荐现代项目用aspect-ratio，兼容老浏览器则采用padding-bottom方案，确保响应式设计中视频不变形。

在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学习网公众号！