background-size: contain 未填满容器是因为其设计逻辑是等比缩放图片以完整显示，当图片宽高比与容器不一致时必然留白；需配合 background-position: center center 实现居中，且须注意容器尺寸、避免混用 object-fit。
background-size: contain 为什么图片没填满容器
因为 contain 的语义是“完整显示整张图，不裁剪”，它会等比缩放图片，让图片的宽和高都 ≤ 容器的宽和高。如果图片原始宽高比和容器不一致，就必然留白——这不是 bug，是设计行为。
常见错误现象：background-image 只显示左上角一小块、四周大片空白、图片明显偏小；尤其在移动端横竖屏切换时更明显。
- 确认是否误用了
background-size: contain而实际需要的是cover（填满但可能裁剪） - 检查容器是否有显式宽高——
contain依赖容器尺寸计算缩放比例，若容器高度为auto或未设高，背景图可能塌缩成一条线 - 避免同时设置
background-repeat: no-repeat且未配background-position，默认居左上，留白全在右下
如何让 contain 居中显示且不留奇怪白边
仅靠 contain 不足以控制对齐方式，必须配合 background-position 才能真正居中。
使用场景：卡片封面、响应式 banner、头像占位图等需保持图像完整性又希望视觉居中的场合。
- 固定写法：
background-size: contain; background-position: center center; - 若容器宽高不定（如 flex 子项），建议加
background-repeat: no-repeat防止意外平铺 - 注意：
center center等价于50% 50%，但前者更可读；不要写成center单值，部分旧浏览器解析不一致
contain 在不同设备上缩放失真怎么办
不是失真，是缩放逻辑被容器尺寸绑架了。比如手机竖屏时容器窄高，图片按比例缩放后可能过小；横屏时又可能过大并溢出（如果容器没设 overflow: hidden）。
性能影响很小，但体验断层明显——用户感觉“同一张图在不同屏幕上看大小差异太大”。
- 给容器设最小尺寸限制，例如：
min-width: 320px; min-height: 180px;，防止contain缩得太小 - 用媒体查询分段控制：
@media (max-width: 480px) { .banner { background-size: 100% auto; } }，此时改用宽度撑满、高度自适应，比contain更可控 - 慎用
background-size: contain在vh或vmin单位容器里——视口变化会触发频繁重绘，低端机可能卡顿
和 object-fit: contain 混用时为什么无效
background-size: contain 只作用于 background-image，对 <img> 标签完全不起作用。这是最常被忽略的边界。
错误示例：给 <img src="..." style="max-width:90%">，毫无效果，控制台也不会报错。
- 对
<img>元素，必须用object-fit: contain+object-position: center - 对伪元素或 div 的背景图，才用
background-size和background-position - 二者不能混用，CSS 层级里它们压根不在同一个作用域——就像给 div 写
font-size不会影响子 img 的文字大小
contain 的“保守缩放”特性很可靠，但它的保守也意味着你需要主动接管对齐、容器约束和响应断点——没人替你猜用户想怎么看到这张图。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
