Flex容器背景图未铺满主因是background-size缺失或设置不当：默认auto不缩放，cover需配合明确高度（如min-height: 100vh），contain必留白，100% 100%会变形；cover失效常因父容器无高度基准、子项锁定高度或background-attachment: fixed干扰；内联样式必须同时声明background-image、background-size、background-repeat和min-height，且避免复合background简写。
Flex容器里背景图没铺满，八成是background-size写错了
Flex布局本身不直接控制背景图缩放，但很多人误以为“容器拉伸了，背景图就该跟着撑开”，结果只设了background-image，漏掉background-size，浏览器默认用auto——图片按原始尺寸渲染，远小于容器，自然留白一大片。
-
background-size: auto（默认）：图片原尺寸，不缩放，也不适配容器 -
background-size: cover：等比缩放并裁剪，填满容器，但必须配合min-height: 100vh或明确高度，否则“填满”无从谈起 -
background-size: contain：等比缩放至完全可见，必留白；若想视觉上“撑高”，得靠padding-top百分比技巧（如padding-top: 56.25%对应16:9） - 别用
100% 100%：强制拉宽又拉高，一定变形，除非图片和容器宽高比完全一致
background-size: cover在Flex里失效的三个隐藏条件
就算写了cover，Flex容器中也常不生效，根本不是属性问题，而是它依赖的底层条件被破坏了：
- 父容器没有明确高度基准：比如只写
display: flex却不设min-height: 100vh或height: 100%，子元素再怎么cover也没参照系 - Flex子项自身设了
height或min-height：这会覆盖align-items: stretch行为，导致容器实际高度被锁死，cover只能在窄条里缩放 -
background-attachment: fixed干扰：尤其在Safari或全屏模式下，fixed会重算缩放原点，造成跳变或局部放大，建议优先用scroll
内联style里background-size: cover为什么总不工作
直接写style="background-size: cover"永远无效——浏览器看到的只是“要缩放”，但没图、没位置、没禁重复，直接忽略该声明。
- 内联必须配齐四要素：
background-image: url('path.jpg')（路径带引号）、background-size: cover、background-repeat: no-repeat、min-height: 100vh - 别用复合属性
background写内联：background: url() no-repeat center / cover中的斜杠语法在部分浏览器会被解析为background-size: auto，cover被悄悄重置 -
background-position不能省：默认center center，但若没显式写出，某些旧版浏览器可能回退到top left，关键内容被裁
移动端和全屏切换时背景图突然“变大”，其实是cover在认真干活
这不是bug，是cover在响应视口变化。当从普通窗口切到2560px宽全屏，或手机横竖屏切换时，容器宽高比剧变，cover会重新计算最小缩放倍数以填满——于是原来居中的脸可能被裁掉一半。
立即学习“前端免费学习笔记（深入）”；
- 人物类图优先用
background-position: top center保头顶，底部场景用bottom center保脚 - 避免在媒体查询里来回切换
cover↔contain：iOS会触发重绘抖动，看起来像拉伸 - 真正要盯住的是
background-position的微调值：用百分比（如30% 70%）比像素更稳，但需真机反复测
background-size有没有被其他规则（比如UI库注入的background简写）静默覆盖。先用开发者工具检查computed样式里background-size最终值，再倒查来源，比盲目加!important快得多。 
