使用CSS的padding-bottom技巧或aspect-ratio属性可固定视频宽高比，推荐现代项目用aspect-ratio，兼容老浏览器则采用padding-bottom方案，确保响应式设计中视频不变形。
在HTML中嵌入视频时，保持固定的宽高比（比如16:9或4:3）非常重要，尤其是在响应式设计中。如果不做处理，视频在不同设备上容易变形或布局错乱。以下是几种实用方法来固定视频的宽高比例。
使用CSS的padding-bottom技巧
这是最常用且兼容性好的方式，通过利用 padding-top 或 padding-bottom 的百分比基于父容器宽度计算 的特性，实现等比缩放。
示例：创建一个16:9的视频容器
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.video-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; / * 9 ÷ 16 = 0.5625，即16:9的比例 * /}.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
说明：设置容器高度为0，用 padding-bottom 模拟高度，这样无论屏幕多宽，iframe 始终保持16:9比例。
使用aspect-ratio属性（现代浏览器推荐）
CSS新增的 aspect-ratio 属性可以直接定义宽高比，更简洁直观。
.video-container { width: 100%; aspect-ratio: 16 / 9; overflow: hidden;}.video-container video {width: 100%;height: 100%;object-fit: cover; / 可选：裁剪填满 /}
注意：该属性在较老版本浏览器（如IE）中不支持，需考虑兼容性。可用作渐进增强方案。
控制原生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视频宽高比例怎么固定_html视频宽高比保持技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583894.html
微信扫一扫 
支付宝扫一扫 
