background-size: cover 是唯一正确选择，必须搭配 min-height: 100vh、background-position: center center 和 background-repeat: no-repeat；100% 100% 必然变形，background-attachment: fixed 在移动端普遍失效。
直接用 background-size: cover + min-height: 100vh + background-position: center center，别碰 100% 100% 或 background-attachment: fixed —— 后者在 iOS Safari 和多数安卓浏览器里会失效或卡顿，前者必然拉伸变形。
为什么 background-size: 100% 100% 在手机上一定变形
它强制把图片宽高分别拉满容器，完全无视原始比例。一张 4:3 的人像图，在竖屏手机（常见 9:16）下会被压扁成“宽脸”，文字 banner 更是糊成色带。这不是渲染 bug，是 CSS 行为定义如此。
-
background-size: cover才是设计用来应对不同屏幕比的：等比缩放，短边填满，长边裁切 —— 变形感来自你没控制裁切位置，不是它错了 - 必须配
background-position: center center，否则默认从左上角对齐，人脸/标题大概率被切掉 - 如果关键内容在顶部（比如 logo+标语），改用
background-position: center top；要保底部 CTA 按钮，用center bottom
移动端缩放时背景图跳变或留白的真正原因
不是代码写错，而是 height: 100vh 在 Safari 和部分安卓浏览器中，会按页面加载瞬间的视口高度计算（含地址栏），之后地址栏收起/弹出不触发重绘，导致背景突然“短一截”或“多一块白”。
- 用
min-height: 100vh替代height: 100vh，确保至少撑满一屏，内容超长时还能自然延展 - 现代浏览器支持
100dvh（dynamic viewport height），能响应地址栏变化，但需降级：min-height: 100vh; min-height: 100dvh; - 别给
body或html设overflow: hidden—— 它会把cover裁掉的部分直接截断，看起来像图被“砍了一半”
Bootstrap 栅格系统怎么偷偷破坏你的全屏背景
把背景图加在 <div class="container"> 或 <div class="row"> 上，等于自缚手脚。.container 默认有 padding，.row 有负 margin，而且它们都受限于 max-width —— 结果就是背景只覆盖中间一窄条，左右留白。
- 正确做法：抽一个独立容器，比如
<div class="hero-bg">，不套任何 Bootstrap 栅格类 - 若必须嵌套在
.container内，加mx-n3 px-0抵消.row的负 margin 和.container的 padding - 检查祖先元素是否设了
transform或perspective—— 这会让background-attachment: fixed失效，哪怕你没显式写，某些 Bootstrap 组件（如 carousel）内部可能引入
图片加载失败时，“不拉伸”的错觉反而更强烈
网络慢或路径错误，background-image 加载失败，浏览器静默降级为透明背景。此时若没设 background-color，底色裸露，文字与空白对比突兀，主观上“变形感”比拉伸还强。
- 必须加 fallback：
background-color: #2c3e50（选图中主色调相近的纯色） - 别混用 Bootstrap 的
.bg-dark等工具类 —— 它们会覆盖你自定义的background-image - 真机调试时，用 DevTools 的 Network 面板确认图片是否返回 404，别只看 CSS 是否生效
最易被忽略的是：高倍屏（Retina、Pixel）下模糊不是 CSS 能修的 —— 一张 1920×1080 的图，在 2x 屏上被渲染为 3840×2160 像素，原始分辨率不够就会发虚。cover 再精准也救不了图源本身。
