cover 会等比缩放图片至短边撑满容器导致长边裁剪，属预期行为；需全图可见改用 contain，兼顾全图与填满需配合 background-position 微调。
background-size: cover 为什么图片总被裁剪？
因为 cover 的设计目标就是「完全覆盖容器」，它会等比缩放图片，直到短边撑满容器，长边必然溢出——这不是 bug，是预期行为。关键在你是否真的需要“全屏无裁剪”。
- 如果内容区域允许被遮挡（比如纯装饰性背景），
cover是最稳妥的选择 - 如果必须看到整张图，改用
contain，但留白不可避免 - 想兼顾“全图可见 + 填满屏幕”，得配合
background-position手动微调，比如background-position: center top把重要主体留在可视区
全屏背景怎么让图片真正居中且不拉伸？
只靠 background-position: center 不够，必须锁死缩放逻辑和容器尺寸。常见错误是忘了设 html 和 body 高度。
- 给
html和body加height: 100%，否则100vh在某些移动端可能失效 - 背景容器需设
min-height: 100vh（不是height: 100vh），防止内容超长时背景被截断 - 完整组合：
body { margin: 0; background: url(bg.jpg) no-repeat center center; background-size: cover; min-height: 100vh; }
background-size: 100% 100% 有什么隐患？
强制拉伸填满，彻底破坏图片宽高比，人像变形、文字模糊、细节糊成一片——尤其在响应式页面里，不同设备下失真程度不可控。
- 仅适用于纯色渐变、几何纹理等本身无比例依赖的背景图
- 绝对避免用于摄影类、Logo 类、含文字的背景图
- 若设计师坚持“必须铺满不留白”，优先沟通换图方案，而不是硬上
100% 100%
移动端 Safari 上背景图突然消失或错位
这是 iOS 15+ 的已知渲染 Bug：当页面有 transform、position: fixed 或滚动监听时，background-attachment: fixed 会触发背景图失效，而普通 cover 也可能因视口计算偏差偏移。
立即学习“前端免费学习笔记（深入）”；
- 去掉
background-attachment: fixed（它在移动端本就不可靠） - 用
background-attachment: scroll+min-height: 100vh替代 - 加一行
background-origin: border-box，防止圆角容器导致背景定位偏移
cover 决定的。 
