background-size: cover 未填满容器是因强制保持宽高比导致裁剪，非bug；当图片与容器宽高比不同时，cover 会等比缩放至完全覆盖，多余部分被裁切。
为什么 background-size: cover 没填满容器？
常见现象是背景图“被切掉一部分”或“留白”，其实不是效果出错，而是 cover 严格按「保持宽高比 + 完全覆盖容器」计算缩放比例。只要图片原始宽高比 ≠ 容器宽高比，就必然有裁剪。
- 比如容器是
400px × 300px（4:3），图片是1920×1080（16:9），cover会等比放大到高度填满300px，此时宽度变成533px，左右各溢出66.5px，被容器裁掉 -
background-position默认是50% 50%（居中），所以裁剪是对称的；若想保留左上角内容，可设为background-position: top left - 检查是否意外设置了
background-attachment: fixed—— 在部分滚动场景下会干扰缩放视觉表现
contain 显示太小、四周全是空白？
contain 是「保持宽高比 + 完全可见」，缩放依据是让整张图放进容器内，所以只要图片比容器大（多数情况），结果就是小图+大量留白。
- 典型误用：给大图配小容器（如
div { width: 200px; height: 150px; }）还用contain，图缩成图标大小 - 如果目标是“图不拉伸、又尽量大”，优先考虑
cover+ 调整background-position控制哪部分被保留 - 若必须用
contain且希望居右下显示，写成：background-position: right bottom，避免默认居中后顶部/左侧留白过多
怎样让背景图既铺满、又不裁剪、还不变形？
做不到。这是 CSS 背景机制的底层限制：cover 和 contain 都强制保持原始宽高比，而「铺满不裁剪不变形」需要同时满足三个条件，数学上矛盾。
- 真要无裁剪+填满，只能放弃等比缩放，改用
background-size: 100% 100%—— 但图片会被拉伸变形 - 折中方案：用
object-fit替代背景图，把图当<img alt="css 背景缩放效果不对怎么办_background-size 使用 cover 或 contain" >放进容器，支持object-fit: cover/contain，还能配合object-position精确控制可视区域 - 响应式场景下，建议用媒体查询分段设置：
div.bg { background-size: cover; } @media (max-width: 768px) { div.bg { background-size: contain; background-position: top center; } }
调试时容易忽略的关键点
很多问题其实和 background-size 本身无关，而是其他样式干扰了视觉判断。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
height（比如仅靠内容撑开），导致背景容器实际高度为0，图自然看不见 —— 加min-height: 100vh或明确高度测试 -
background-repeat: repeat（默认值）在cover下通常无影响，但若图很小又没关重复，可能掩盖缩放问题 - 使用
background-image: url(...)时路径错误或资源 404，浏览器会静默降级为纯色背景，误以为是缩放失效 - 某些旧版 Safari 对
background-size的解析有偏差，特别是配合background-attachment: fixed时，建议加-webkit-background-size前缀
cover 还是 contain，而是先确认：你到底要保留图像完整性，还是容器视觉完整性。 
