移动端高清视频背景如何通过CSS实现全屏铺满且不拉伸？-css教程-PHP中文网

必须为video元素直接设置position: fixed、width: 100vw、height: 100dvh、object-fit: cover、object-position: 50% 30%、display: block，并配合body{margin:0;overflow-x:hidden}，才能真正全屏铺满、不拉伸、无黑边且裁切精准。

移动端高清视频背景如何通过css实现全屏铺满且不拉伸？

直接给 video 元素设 position: fixed + width: 100vw + height: 100dvh + object-fit: cover，再补上 body { overflow-x: hidden; margin: 0; }，才能真正铺满、不拉伸、无黑边。只写 object-fit: cover 是无效的。

video 必须自己 fixed，不能靠父容器

很多人把 video 套在

 里，然后只给 div 设 position: fixed，结果视频还是缩在左上角。因为 object-fit 是作用在 video 自身的，它的裁剪行为取决于它自己的盒模型尺寸和定位方式。

video 必须直接设 position: fixed; top: 0; left: 0; right: 0; bottom: 0;（四边写全，避免横屏切换偏移）
别用 width: 100%; height: 100%;——它依赖父级包含块，在 fixed 定位下容易失准，且会强制拉伸破坏比例
必须用 width: 100vw; height: 100dvh;（dvh 比 vh 稳，iOS 地址栏收放时不跳变）
加 display: block;，否则 Safari 下 object-fit 可能不生效

object-fit: cover 不是万能的，得配好容器尺寸和裁切焦点
object-fit: cover 的作用只是“按比例缩放并裁切”，它不会帮你撑开空间。如果容器本身没占满视口，裁之前就已留空，黑边/滚动条必然出现。


video 必须同时设 object-fit: cover; 和 object-position: 50% 30%;（用百分比微调裁切中心，避免人脸或关键内容被切掉）
不要只靠 width: 100vw; height: 100dvh; 就完事——漏掉 body { margin: 0; overflow-x: hidden; }，安卓微信和 Safari 竖屏必出横向滚动条
若想让视频“刚好完整显示”（不留黑边但可能有上下/左右留白），改用 object-fit: contain，但这不是“铺满”需求

移动端自动播放失败？HTML 属性一个都不能少
CSS 再完美，视频播不出来也是白搭。iOS 和 Android WebView 对自动播放有硬性拦截规则，缺任意一项，大概率卡首帧、跳原生全屏或静音失败。

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										


 —— 这四个属性缺一不可

muted 是前提，不是可选项；playsinline 防止 iOS 跳转原生播放器，否则 position: fixed 失效

preload="metadata" 比 "auto" 更稳妥：只加载时长、宽高信息，支撑 object-fit 计算，又不预载画面帧
别指望纯 CSS 解决播放问题，JS 补 video.play().catch(() => {}) 是兜底手段，但 HTML 属性是基础

最易被忽略的是 overflow-x: hidden 和 object-position 的组合：前者管“不溢出”，后者管“裁哪儿”。很多人调好了尺寸却没调裁切点，关键内容一进视口就被切掉，还以为是视频源问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！