background-size: cover 是唯一能同时满足“铺满容器”和“不拉伸”的方案，因其强制等比缩放至短边撑满容器并裁剪多余部分，配合 height 链、定位及容器约束方可生效。
background-size: cover 是唯一能同时满足“铺满容器”和“不拉伸”的 CSS 方案，但必须配齐高度链、定位和容器约束，缺一不可。
为什么 background-size: cover 是必选项
它强制图片等比缩放，直到**短边刚好撑满容器**，多余部分被裁剪——这是“不变形”的数学基础。用 100% 100% 或 contain 都会破坏比例：100% 100% 是强行拉伸，contain 则必然留白；而 cover 的裁剪是可控的，靠 background-position 调整关键内容可见区域。
height 链断裂是 80% “铺不满”问题的根源
浏览器默认 html 和 body 高度由内容决定，不是视口高度。哪怕你写了 background-size: cover，如果父级没高度，背景图只渲染在“内容高”那一小块里。
-
html { height: 100%; }—— 让html拿到父（根）高度 -
body { min-height: 100vh; margin: 0; }——vh更可靠，min-height防止内容少时塌陷 - 若目标容器是某个
section，它本身也得有明确高度，比如height: 100vh或min-height: 100vh
background-position 不是可选，而是保命设置
默认 center 在多数场景下够用，但一旦图片构图偏上（比如人像头顶留白多），滚动或缩放时人脸可能被裁掉。这时必须显式指定：
-
background-position: top center;—— 优先保顶部内容 -
background-position: 50% 30%;—— 百分比值更精细：横向居中，纵向上移 20% - 慎用
background-attachment: fixed：Safari 移动端可能降级为scroll，且高 DPI 下易出现重绘跳变
响应式断点下必须重设 background-position，不能只靠 cover
同一张大图，在桌面横屏下 cover + center 很好，但在手机竖屏下可能把人脸整个切掉。这不是 cover 的错，而是容器宽高比变了。
- 用媒体查询单独控制：
@media (max-width: 768px) { .hero { background-position: top; } } - 更稳妥的做法是为不同断点准备不同构图的图源，用
picture或媒体查询切换background-image - 别指望
aspect-ratio对背景图生效——它只作用于块级元素自身，对background-image无影响
真正容易被忽略的是：所有这些样式都依赖图片本身有稳定、可信的宽高比。如果 CMS 输出的图宽高元数据混乱，或者压缩时丢掉了原始比例，cover 再精准也没用——得从图源校验开始，而不是在 CSS 里硬调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
