使用CSS的padding-bottom技巧或aspect-ratio属性可固定视频宽高比，推荐现代项目用aspect-ratio，兼容老浏览器则采用padding-bottom方案，确保响应式设计中视频不变形。
在HTML中嵌入视频时，保持固定的宽高比（比如16:9或4:3）非常重要，尤其是在响应式设计中。如果不做处理，视频在不同设备上容易变形或布局错乱。以下是几种实用方法来固定视频的宽高比例。
这是最常用且兼容性好的方式，通过利用 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比例。
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;
}
这样能确保视频按原始比例缩放，不会超出容器。
根据实际需求选择对应比例即可。
基本上就这些。推荐优先使用 aspect-ratio（现代项目），兼顾兼容性则用 padding-bottom 方案。关键是不让视频脱离原始比例，保证视觉体验一致。
以上就是html视频宽高比例怎么固定_html视频宽高比保持技巧的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
506
收藏
