background-size: cover 不是拉伸而是等比缩放裁剪，真正拉伸需用 100% 100%，但会变形；必须挂载在 html 上并配齐三行基础样式，移动端优先用 100dvh 防 iOS 地址栏干扰。
别用 background-size: cover —— 它不拉伸，只裁剪；要真正“拉伸”，必须显式写 background-size: 100% 100%，但得接受变形风险。
为什么 background-size: cover 不是拉伸
它强制保持图片原始宽高比，等比缩放后覆盖容器，超出部分被裁掉。比如一张竖图（4:5）放在横屏（16:9）上，上下会被切掉——这不是 bug，是设计行为。如果你看到“像拉伸了”，大概率是 background-position 没调准，关键内容偏移出可视区。
background-size: 100% 100% 才是真拉伸
这组值会让图片宽度和高度都强行撑满容器，彻底放弃比例约束。适用场景有限，但确实存在：
- 纯装饰性背景（如渐变纹理、抽象噪点图），无关键构图
- 后台管理页 Banner 区，内容本身已做响应式排版，背景仅作氛围补充
- 需要与
background-attachment: fixed配合实现视差滚动时，cover在 iOS Safari 中易跳动，100% 100%更稳
注意：必须确保容器有明确尺寸，否则拉伸无效。常见失效原因包括：height: auto、父级未设 min-height、或背景挂载在未撑高的 div 上。
立即学习“前端免费学习笔记（深入）”；
必须配的三行基础样式
无论用 cover 还是 100% 100%，以下三步缺一不可：
-
html, body { margin: 0; padding: 0; }—— 清除浏览器默认边距，否则背景会被挤出视口 -
html { height: 100%; }—— 让body或子元素能继承高度基准；比直接写body { height: 100vh; }更兼容 iOS 地址栏收放 -
html { background: url("bg.jpg") no-repeat center center / 100% 100%; }—— 背景必须挂载在html上，不是body，避免滚动时露出空白
移动端 100vh 不准怎么办
iOS Safari 中，100vh 会把地址栏高度算进去，导致背景顶部留白或底部被切。解决方案优先级如下：
- 首选
min-height: 100dvh（现代标准），再 fallback 到min-height: 100vh - 若需兼容旧版 Safari，用 JS 动态设置：
document.documentElement.style.minHeight = `${window.innerHeight}px`，并在resize事件中更新 - 绝对不要依赖
body { height: 100vh; }+background-size: 100% 100%—— 内容超长时，背景会截断在首屏
真正难的不是写对那几行 CSS，而是判断这张图是否真的适合拉伸。人脸、文字、LOGO 等关键元素一旦被压扁，用户第一眼就感知到违和——这种问题，代码改不完，得从源头确认设计稿比例或换图。
