直接在video元素上设置object-fit并配合明确尺寸可保持宽高比不变形；需显式设定宽高或容器比例，推荐cover值配overflow:hidden防溢出。
直接在 <video></video> 元素上设置 object-fit CSS 属性，并配合明确的尺寸控制，就能保持原始宽高比不被拉伸变形。
必须显式设定 video 的宽高或容器比例
object-fit 不会自动生效——它只在 <video></video> 有确定尺寸时起作用。常见可靠方式：
- 给
<video></video>设置width: 100%; height: 100%;，同时确保其父容器有明确宽高（如height: 400px;或aspect-ratio: 16 / 9;） - 用
aspect-ratio: 16 / 9;（现代浏览器支持）约束容器比例，再让 video 填满该容器 - 避免仅设
width: 100%;而height: auto;，此时 object-fit 可能被忽略
选对 object-fit 值才能真正“保比例”
不是所有值都适合保比例显示，关键看使用场景：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- cover：等比缩放并填满容器，超出部分裁剪 → 无黑边、不变形，最常用（如全屏背景、海报视频）
- contain：等比缩放并完整显示全部画面 → 必然留黑边，但内容零丢失（适合教学、预览类）
- none：完全不缩放，按原始像素显示 → 若尺寸不匹配，可能溢出或留白
- fill：强制拉伸填满 → 会破坏比例，导致变形，应避免
-
scale-down：在
none和contain中取更小尺寸 → 适合响应式兜底
微调裁剪区域：用 object-position 配合 cover
当用 cover 时，视频会被裁剪，默认居中。若人物偏上或关键内容靠边，可手动调整可视区域：
-
object-position: center top;—— 优先显示上半部分，适合演讲/人像视频 -
object-position: 50% 20%;—— 水平居中，垂直向上偏移 20% -
object-position: left center;—— 左对齐，保留左侧内容
别忘了加 overflow: hidden
父容器需设置 overflow: hidden;，否则 cover 模式下裁剪掉的部分可能意外溢出，造成布局错乱或滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
