最可靠全屏覆盖用position:fixed+object-fit:cover或background-image+background-size:cover；前者需display:block消除间隙，后者更稳定且免dom冗余。
图片全屏覆盖的 CSS 核心写法
直接让 <img alt="html5如何让一个图片覆盖整个页面" > 撑满整个视口，最可靠的方式不是靠 width: 100%; height: 100%，而是用 object-fit: cover 配合绝对定位或 position: fixed。否则图片会拉伸变形，或因默认 inline 行内特性留白。
-
<img alt="html5如何让一个图片覆盖整个页面" >默认是 inline 元素，底部有基线间隙，必须加display: block或vertical-align: top - 用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh能绕过文档流限制，避免滚动条干扰 -
object-fit: cover保持宽高比并裁切，contain会留白，fill一定变形
为什么 background-image 更常用
多数场景下，用 CSS 的 background-image 替代 <img alt="html5如何让一个图片覆盖整个页面" > 标签更稳妥——它天生脱离文档流、无语义干扰、支持 background-size: cover 直接生效，且能避免图片加载失败时的 alt 文本/占位问题。
- HTML 中不需要额外
<img alt="html5如何让一个图片覆盖整个页面" >标签，减少 DOM 节点 -
background-size: cover和background-position: center组合即可实现居中裁切 - 移动端缩放、横竖屏切换时表现更一致；
<img alt="html5如何让一个图片覆盖整个页面" >在 iOS Safari 中偶发渲染错位 - 如果图片需被屏幕阅读器识别或 SEO 索引，才考虑
<img alt="html5如何让一个图片覆盖整个页面" >+alt，但此时“全屏覆盖”和语义性本质冲突
响应式下容易忽略的坑
全屏图在不同设备上最常出问题的不是尺寸，而是 DPR（设备像素比）和视口单位行为差异。
-
100vh在 iOS Safari 地址栏收起/展开时会重算，导致页面跳动；改用100dvh（2023 年后支持）可缓解，但兼容性需查caniuse - 高清屏（如 Retina）下，用普通尺寸图全屏会模糊；应提供
srcset或用background-image配合媒体查询加载 @2x 图 - 不要对
<img alt="html5如何让一个图片覆盖整个页面" >设置max-width: 100%，它会压制width: 100vw的效果
简单可复制的代码片段
以下是最小可用方案，兼容主流浏览器（Chrome 84+、Firefox 69+、Safari 15.4+）：
jQuery html5背景视频插件vidbacking
下载
插件描述：vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频，插件会自动将背景回退为指定的背景图片。
立即学习“前端免费学习笔记（深入）”；
body {
margin: 0;
overflow: hidden;
}
.full-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
display: block;
}
对应 HTML：<img src="hero.jpg" class="full-bg" alt="html5如何让一个图片覆盖整个页面" >。若用背景图，则把 body 改为：background: url(hero.jpg) center/cover no-repeat。
真正难的不是写出来，而是想清楚这张图到底要不要进 DOM、是否要适配折叠屏或可变刷新率设备——这些细节不会报错，但会在某个深夜的真机测试里突然浮现。
