最可靠方案是用 background-image 配合 background-size: cover、no-repeat、center，容器设 margin/padding: 0 和 min-height: 100vh/dvh；img 标签易变形、兼容差、语义冗余。
用 background-image 配合 background-size: cover 最可靠
直接设 <img alt="html如何让一张图片正好铺满一个页面" > 标签的宽高为 100vw/100vh 容易拉伸变形或留白，而用 CSS 背景图能真正“铺满且不裁错”。关键不是填满容器，是让图像内容适配视口比例。
-
background-size: cover保证图像完全覆盖整个区域，可能裁剪边缘（适合摄影类主图） -
background-size: contain保证全图可见，但可能有空白（不适合“铺满”需求） - 必须同时设
background-repeat: no-repeat和background-position: center center，否则居中和重复行为不可控 - 记得给
或目标容器加margin: 0; padding: 0;，否则默认边距会露白边
为什么不用 <img alt="html如何让一张图片正好铺满一个页面" > 直接撑满
很多人试过给 <img alt="html如何让一张图片正好铺满一个页面" > 设 width: 100vw; height: 100vh;，结果要么变形，要么滚动条出现，要么顶部/底部被截掉一截——因为 img 是替换元素，其宽高设置会强制拉伸原始比例，且无法自动裁剪。
- 若图片宽高比 ≠ 视口宽高比，
width/height同时设死必然导致失真 -
object-fit: cover可以补救，但 IE 不支持，移动端部分老 Android 也有兼容问题 - 用
<img alt="html如何让一张图片正好铺满一个页面" >还要额外处理加载失败、alt 文本语义、SEO 权重等干扰项，纯视觉铺底没必要
background-image 的路径和加载注意事项
背景图路径写错、404、或没设 height 是最常导致“看不见图”的三个原因。
- 路径建议用相对根路径，比如
url('/images/hero.jpg')，避免嵌套页面时路径错乱 - 容器必须有明确高度，
body { min-height: 100vh; }比height: 100vh更稳妥（防止内容少时高度塌缩） - 如果图太大，首屏加载慢，可加
background-image: url('...'); background-image: image-set(...);做高清适配，但别为了“铺满”强行塞 5MB 图 - 开发时打开 DevTools → Network，过滤
Img，确认背景图是否真的发起了请求并返回 200
移动端 100vh 失效？用 dvh 替代
iOS Safari 和部分安卓浏览器在地址栏展开/收起时会动态改变 vh 单位值，导致背景图突然跳动或留黑边。这不是 bug，是浏览器把地址栏算进了视口。
立即学习“前端免费学习笔记（深入）”；
- 现代方案：用
100dvh（dynamic viewport height），它始终反映当前可视区域高度 - 兼容写法：
height: 100vh; height: 100dvh;，新浏览器用dvh，旧的回退到vh - 注意：
dvh在 Safari 16.4+、Chrome 105+ 才支持，如需兼容更老版本，得监听resize事件用 JS 动态设高度（但多数场景没必要）
body {
margin: 0;
background: url('/bg.jpg') center/cover no-repeat;
min-height: 100vh;
min-height: 100dvh;
}
重点不在“怎么写”，而在理解：铺满的本质是控制图像在固定容器里的渲染策略，不是堆属性。容易被忽略的是 min-height 和 dvh 的组合，以及背景图路径是否真能访问到。 
