background-size: cover 是唯一可靠解，它等比缩放图片覆盖容器并裁剪溢出部分，非拉伸；需配合 background-position: center center 等精准定位关键内容，并确保容器有明确高度（如 min-h-screen 或 min-height: 100dvh），避免 height: auto 或 background-attachment: fixed 干扰。
background-size: cover 是唯一可靠解，但“不拉伸”不等于“不裁剪”——它严格保持原始宽高比，只是等比缩放后覆盖容器，边缘被切掉是正常行为，不是 bug。
为什么 background-size: cover 看起来像拉伸了？
这不是拉伸，是裁剪位置错了。浏览器把图片等比放大到「短边刚好填满容器」，长边必然溢出。比如一张竖构图（4:5）用在横屏（16:9）上，上下就会被切掉一大截。
- 检查
background-position：默认是0 0，人物常偏上或偏左；必须显式写background-position: center center - 若关键内容（如人脸）偏上，可微调为
background-position: center top或background-position: center 20%（需开启 Tailwind 的 arbitrary value） - 别混用
background-attachment: fixed和background-size: cover—— iOS Safari 下 fixed 会干扰缩放参照系，导致滚动时背景跳动
容器高度塌陷是最常见的失效原因
写了 background-size: cover 却只看到图片左上角一丁点？大概率是容器 content box 高度为 0。
- 确保父级有明确高度：用
min-h-screen（Tailwind）或min-height: 100vh（原生 CSS），别用h-screen—— 内容超长时会被截断 - 若在 flex 容器里（如
flex flex-col），子元素需加flex-1或h-full才能撑开高度 - 避免
height: auto与background-size: cover共存：前者随内容变高，后者需要固定尺寸作缩放基准
移动端视口高度不准怎么办？
100vh 在 iOS Safari 中会被地址栏遮挡，导致背景图顶部留白或底部被切；100dvh 是更现代的替代，但旧版 Safari 不支持。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-height: 100dvh，再 fallback 到min-height: 100vh - 更稳妥的做法是 JS 动态设高：
element.style.minHeight = `${window.innerHeight}px`，并在resize事件中更新 - 如果页面允许滚动，背景设在
html上比body更稳——body滚动时可能带出空白，html背景始终锚定视口
真正难的不是让图铺满，而是预判哪些设备、哪些比例下关键内容会被切掉。设计师给图时，最好确认宽高比接近 16:9 或 4:3；否则哪怕代码全对，上线后还是得返工调 background-position。
