background-size: 100% 100% 是暴力拉伸，破坏宽高比；正确方案是 background-size: cover 配合 html/body 高度继承、min-height: 100vh 和 background-repeat: no-repeat。
直接用 background-size: 100% 100% 能强制拉伸，但绝大多数场景不该这么干——它会破坏宽高比，人脸压扁、文字拉长、构图崩坏。真正“铺满且可用”的方案，是 background-size: cover 配合正确的容器高度设置。
为什么 background-size: 100% 100% 多数时候是错的
这个值不是“填满”，是“暴力拉伸”。浏览器不管原始比例，硬把图片宽高分别拉到容器 100%，结果就是：
- 横屏手机上人像被横向压扁，眼睛变椭圆
- 超宽显示器里文字被纵向拉长，可读性归零
- 滚动时可能出现渲染撕裂（尤其低端安卓 WebView）
- 设计师精心构图的焦点区域完全错位
它只适合极少数明确要求“不留白、不裁剪、允许失真”的运营页，比如纯色渐变叠加文字的海报式页面。
background-size: cover 必须配对的三件事
cover 本身只管缩放逻辑，但要让它真“铺满全屏”，下面三点缺一不可：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
html, body { margin: 0; height: 100%; }—— 清边距 + 高度继承链打通，否则背景只撑开内容高度 - 目标容器（通常是
body）必须有明确高度：用min-height: 100vh比height: 100vh更稳，防内容少时留白 -
background-repeat: no-repeat—— 开发时用小图占位容易漏写，一上线就平铺成马赛克
漏掉任意一条，cover 就只是“看起来像铺满”，实际顶部/底部/侧边必然留空或截断。
object-fit: cover 和 background-size: cover 别混用
这是两个完全不同的控制层，选错就白调：
- 用
background-image→ 控制权在 CSS 的background-size，object-fit对它无效 - 用
<img>标签 → 必须给容器设固定宽高（如width: 100vw; height: 100vh;），再给img加object-fit: cover -
img默认是display: inline，会因基线对齐产生底部 4px 空隙，得加display: block
语义上，背景图不该用 <img>；内容图不该用 background-image。强行互换会导致 SEO 损失、可访问性下降、加载策略失效。
移动端 vh 动态变化导致背景跳动怎么办
iOS Safari 地址栏收起/展开时，100vh 会从 100% 变成约 105% 或 90%，背景图跟着“弹跳”。这不是 bug，是浏览器行为：
- 不用
vh，改用 JavaScript 动态计算：document.documentElement.clientHeight，然后写入style.height - 更轻量的解法：用
html { min-height: 100%; }+body { min-height: 100vh; }，靠自然流式撑高 - 真要视差效果，
background-attachment: fixed在 iOS 上大概率失效或卡顿，降级为scroll更实际
最容易被忽略的是图片分辨率——一张 1280×720 的图在 iPhone 15 Pro 上模糊得像马赛克，但塞进 4K 图又拖慢首屏。该切 @2x、该加 WebP 压缩、该用 background-color 占位，一个都不能省。
