关键解法是直接在video标签上设置object-fit属性：fill（拉伸变形）、contain（等比缩放留黑边）、cover（等比填满裁剪边缘）、none（原尺寸）或scale-down（取none与contain中更小者），需配合明确的width/height才生效。
用 video 标签播放视频时，如果容器尺寸和视频原始宽高比不一致，浏览器默认会拉伸填充，导致画面变形。解决的关键是配合使用 object-fit CSS 属性，它控制视频内容如何适应其容器盒，而不是靠 JS 或额外 wrapper。
理解 object-fit 的常用取值
object-fit 作用于 <video> 元素本身（不是父容器），常见值有：
- fill：默认行为，强行拉满容器，必然变形
- contain：完整显示整个视频，保持比例，留黑边（上下或左右）
- cover：填满容器且保持比例，可能裁剪边缘（推荐用于全屏/海报场景）
- none：原尺寸显示，不缩放，超出部分被裁剪
-
scale-down：等同于
none或contain中更小的那一个
正确写法：直接作用于 video 元素
不要写在父 div 上，必须加在 <video> 标签的 style 或 CSS 类中：
<video controls style="width: 100%; height: 300px; object-fit: cover;"> <source src="demo.mp4" type="video/mp4"> </video>
注意：width 和 height 需明确设定（或由父容器约束），否则 object-fit 无实际效果；若只设 width，height 为 auto，则高度由视频原始比例决定，object-fit 可能不生效。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
搭配 object-position 精确控制裁剪区域
当使用 cover 时，视频会被裁剪，可用 object-position 调整“看哪一部分”：
-
object-position: center center（默认，居中） -
object-position: top优先显示上半部分 -
object-position: 20% 30%水平偏移20%，垂直偏移30%
例如人物演讲视频用 object-position: center top，可确保人脸始终在可视区上方。
兼容性与兜底处理
object-fit 在现代浏览器（Chrome 31+、Firefox 36+、Safari 10.1+、Edge 16+）均支持。IE 完全不支持，如需兼容 IE，可：
- 用 JS 检测支持性：
if ('objectFit' in document.documentElement.style) - 对 IE 单独用 background-image + JS 控制 poster 图片模拟，或放弃自适应，固定比例容器 + 视频 poster
移动端 Safari 对 object-fit 支持良好，但早期 iOS 版本（如 iOS 9）对 object-position 支持有限，建议测试真机。
