poster 总是拉伸或留白是因为浏览器默认用 contain 方式渲染，保持宽高比且不参与 css 布局计算；解决方法是确保 poster 图片、video 容器及其父容器的宽高比严格一致，并合理使用 object-fit。
video 的 poster 为什么总是拉伸或留白
poster 图片本身不参与 CSS 布局计算，浏览器默认用 contain 方式渲染它——保持宽高比、完整显示，所以只要 poster 尺寸和 video 容器比例不一致，必然出现上下/左右黑边，或被强行压缩变形。这不是 CSS 没生效，而是 poster 渲染逻辑压根没走常规盒模型。
必须让 poster 和 video 容器宽高比严格一致
object-fit 控制的是整个 <video></video> 元素的“内容区域”（含 poster + 视频帧），但前提是容器有明确比例。否则 object-fit: cover 会按容器实际尺寸裁剪，poster 就容易切掉关键内容。
- 给
<video></video>的**父容器**设aspect-ratio: 16 / 9（或你视频的真实比例） - video 自身写
width: 100%; height: 100%，不要设内联width/height属性 - 确保 poster 图片原始分辨率匹配该比例（如 1920×1080、1280×720）
- 避免用
padding或border直接作用在<video></video>上，否则 poster 渲染区域偏移
object-fit 取值对 poster 的实际效果差异
object-fit 对 poster 生效，但不同值行为差别很大，选错就白调：
-
object-fit: cover→ poster 等比缩放后裁剪填满容器，边缘可能被切掉 -
object-fit: contain→ poster 完整显示，四周留空；适合教学类封面，但留白位置不可控 -
object-fit: fill→ 强行拉伸，人像/文字严重变形，基本不用 - 不设
object-fit→ 浏览器回退到默认contain，和直接写一样
iOS Safari 和 Chrome 对 poster 的隐藏时机不同
Chrome 在 loadedmetadata 事件触发后立刻隐藏 poster，Safari 可能一直显示到用户点击播放。这意味着：如果你依赖 poster 当“静态封面”，光靠 HTML poster 属性不可靠。
- 真要长期显示封面图，得用
background-image+<video></video>叠层方案 - 动态设置
video.poster = 'xxx.jpg'在部分 iOS 版本无效，优先写死在 HTML 里：<video poster="cover.jpg"></video> - 路径务必用根相对路径（
/assets/cover.jpg），避免 JS 执行上下文导致 404
最常被忽略的一点：poster 模糊不是 CSS 问题，是图片分辨率低于容器显示尺寸后被放大所致。哪怕用了 object-fit: cover，如果原图只有 800×450 却要铺满 1920×1080 容器，像素必然糊——换图比调样式更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
