background-size: cover是防拉伸的唯一可靠解法，它等比缩放并裁剪图片以完全覆盖容器，但必须配合background-position: center center、background-repeat: no-repeat及明确容器高度（如min-height: 100vh）才能生效。
background-size: cover 是唯一可靠解法
用 background-size: 100% 100% 就是主动选择拉伸变形——人像变胖、横幅压扁、文字糊成色块，这不是 bug，是你明确告诉浏览器“不惜一切代价填满宽高”。真正要防拉伸，必须用 background-size: cover：它等比缩放图片，确保至少一边撑满容器，多余部分自动裁剪，原始比例始终保留。
但只写这一条没用。常见错误是只加 cover 却漏掉三件事：
• background-position: center center —— 不写就默认左上角对齐，人脸/标题大概率被裁掉
• background-repeat: no-repeat —— 不关平铺，小图会重复铺满整屏
• 容器本身没高度 —— cover 需要可测量空间才能缩放，否则退化为原始尺寸
容器高度必须显式设为视口单位
别依赖 height: 100%，它卡在父级继承链里。html 和 body 默认不占满视口，height: 100% 在 body 上基本等于没写。直接用 min-height: 100vh 最稳：
- 给背景容器（比如
<div class="hero-bg">）加 <code>min-height: 100vh，不是height: 100vh—— 防内容超长时底部被截 - 若需适配移动端地址栏显隐，可叠加
height: 100dvh（Chrome 104+/Safari 16.4+ 支持），但必须带min-height: 100vh降级兜底 - 避开 Bootstrap 的
.container或.row直接套背景 —— 它们的 padding/margin 会吃掉边缘，导致“看似全屏实则留白” - 放弃
background-attachment: fixed—— 它在 iOS Safari 上多数失效，且和缩放叠加后错位更明显 - 不用内联 style 写 background 复合属性 ——
style="background: url(...) no-repeat cover"里顺序错或缺值，cover会被浏览器静默重置为auto - 图片路径必须带引号：
url("bg.jpg")，漏引号会导致整条 background 声明失效，页面只剩 fallback 色块 - 真机调试时，打开 DevTools Network 面板确认图片是否 404 —— 加载失败时，
cover再精准也救不了空白底色 - 选一个与图片主色调接近的纯色，比如深灰
#2c3e50或暖棕#8b5cf6 - 别用 Bootstrap 的
.bg-dark等工具类 —— 它们会覆盖你自定义的 background 声明 - 高倍屏（Retina）下模糊？那是图源分辨率不够，CSS 再怎么调也补不回来 —— 拉伸填充是另一回事，
cover本身不解决像素密度问题
缩放和移动端的几个硬坑
浏览器缩放（Ctrl + +/-）、系统 DPI 缩放、iOS 地址栏收起/弹出，都会让 100vh 计算失准，表现为顶部突然留白或底部被砍。这不是代码错，是规范限制。
绕过方法很实际：
fallback 色块不是可选项
网络慢、路径错、CDN 故障，都会让 background-image 加载失败。此时浏览器静默降级，若没设 background-color，文字直接怼在白底上，主观感受就是“背景突然拉伸变形”。
必须加 fallback：
