最稳方案是background-size: cover配合min-height: 100vh，而非height: 100vh；需清除html/body默认边距、设background-position: center、background-repeat: no-repeat，并避免用<img>强拉伸导致失真或兼容性问题。
直接用 background-size: cover 配合 height: 100vh 是最稳的方案，不是所有“全屏”都等于“把 <img> 拉满”，误用会导致失真、滚动条或布局塌陷。
为什么不用 <img> 标签直接撑满视口
把 <img> 的 width 和 height 强设为 100vw/100vh 看似简单，但实际问题很多：
- 图片会强制拉伸变形，除非加
object-fit: cover，但 IE 不支持 - 如果父容器没设高度（比如
body默认不是 100% 高），100vh失效 -
<img>是流式元素，可能触发意外的 margin/padding/line-height 间隙 - 语义上它是一张“内容图”，不是“背景”，SEO 和可访问性也弱于明确用途
background-image + cover 的最小可靠写法
这是目前兼容性最好、行为最可控的方式，适用于首屏大图、登录页等场景：
- 必须给
html和body清除默认边距：margin: 0; padding: 0; -
body要设height: 100vh（不是100%），否则背景区域高度为 0 -
background-size: cover是关键——等比缩放并裁切，确保无留白 - 加上
background-position: center，避免人脸/主体被裁掉 - 禁用重复：
background-repeat: no-repeat
示例：
立即学习“前端免费学习笔记（深入）”；
html, body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
移动端和高 DPR 屏幕要注意什么
background-size: cover 在手机上表现基本一致，但视觉质量容易掉档：
- 别用 1200px 宽的图在 iPhone 15 Pro 上显示——建议提供至少 2x 分辨率版本（如
hero@2x.jpg） - iOS Safari 对
background-attachment: fixed支持不稳定，视差效果可能卡顿或被禁用，生产环境慎用 - 加载失败时页面会裸奔，建议加
background-color占位，比如background-color: #f0f0f0 - 不要依赖
srcset给背景图换源——CSS 背景不支持响应式图源切换，得靠媒体查询或 JS 动态改background-image
如果非要用 <img> 实现类似效果
仅限需要保留图片语义、或后续要加 alt 文本/懒加载等场景。必须满足三个条件才可靠：
- 父容器明确设了宽高，例如
width: 100vw; height: 100vh; -
<img>设width: 100%; height: 100%;+object-fit: cover; - 加
display: block;消除 inline 元素默认的基线对齐空白
注意：Safari 旧版本（object-fit，降级方案只能切到 background-image。
真正容易被忽略的是容器高度来源——很多人只设了 body { height: 100vh; }，却忘了 html 默认没有高度，导致背景区域实际只有内容高度。这个细节一漏，整套就失效。
