关键在于用object-fit控制视频按比例适配容器，需先设video明确尺寸（如width:100%;height:100%）并由父容器约束；cover裁剪填满，contain等比留黑边，fill和none易变形或溢出，scale-down为尺寸不确定时的兜底方案。
关键不是“填满”，而是让视频在保持自身比例的前提下，按需适配容器——object-fit 就是干这个的，它直接作用于 元素，控制画面怎么“塞进去”，而不是靠拉伸变形硬凑。
必须先给 video 设明确尺寸
object-fit 不会自己猜大小。如果只写 width: 100%，height 是 auto，那它基本不生效。得让浏览器知道“盒子有多大”：
- 推荐用
width: 100%; height: 100%，再由父容器约束高度（比如设固定高、或用aspect-ratio） - 现代项目可直接用
aspect-ratio: 16 / 9配合width: 100%，高度自动算出，更干净 - 别用 HTML 的
width和height属性，它们会强制像素值，破坏响应式
cover：最常用，全屏/海报场景首选
等比缩放，填满整个容器，超出部分裁剪。适合强调视觉冲击、允许边缘内容牺牲的场景（比如首页背景视频、封面图）：
- 加
overflow: hidden到父容器，防止裁剪后的内容溢出 - 配合
object-position可微调裁剪区域，比如object-position: center top让人物头顶不被切掉 - 注意：竖屏视频（9:16）放进横屏容器（16:9），上下会被裁；反之则左右被裁
contain：需要看清全部内容时用
等比缩放，确保整段视频完整显示，留黑边。适合教学、演示、预览类场景：
- 黑边位置取决于容器宽高比：横屏容器放竖屏视频 → 黑边在左右；竖屏容器放横屏视频 → 黑边在上下
- 如果想统一黑边在上下（避免侧边留空干扰布局），可用
min-height+max-width控制容器行为 - 不推荐用于全屏背景，容易出现大片空白影响视觉
慎用 fill 和 none
fill 强制拉伸，一定变形；none 原尺寸显示，极易溢出或太小。两者都有明确适用边界：
-
fill仅适合无比例要求的素材，如纯色测试视频、抽象粒子动画 -
none多用于调试或特殊 UI 组件（比如小图标式视频按钮），日常播放几乎不用 -
scale-down是兜底选项：当视频原始尺寸大于容器时，自动选none或contain中更小的那个，适合不确定源视频尺寸的场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
