background-size: cover未填满容器主因是父容器宽高未设置，导致无参考系；cover等比缩放覆盖容器可能裁剪，contain则完整显示可能留白；移动端失效常因dpr或viewport缩放，需配合center定位、大图源及真机验证。
background-size: cover 为什么图片没填满容器
多数情况是父容器没设宽高，cover 没参考系。CSS 背景图尺寸计算依赖元素自身的 width 和 height，如果这两个值是 auto（比如块级元素没设高、或内部内容塌陷），浏览器就按“内容高度”算，背景图自然缩在角落。
- 检查父元素是否设置了明确的
width和height，或至少min-height - 常见坑：用
display: flex布局时，子项默认不占满高度，需加align-items: stretch或显式设高 - 如果容器是响应式（如
max-width: 100%），确保height不为0—— 可临时加border: 1px solid red看实际渲染区域
cover 和 contain 的行为差异在哪
cover 是等比缩放后「完全覆盖」容器，可能裁剪；contain 是等比缩放后「完整显示」整张图，可能留白。关键区别不在“要不要拉伸”，而在缩放后的锚点和裁剪逻辑。
-
cover：缩放倍数 =max(containerWidth / imageWidth, containerHeight / imageHeight) -
contain：缩放倍数 =min(containerWidth / imageWidth, containerHeight / imageHeight) - 两者都保持原图宽高比，但
cover优先保填充，contain优先保完整 —— 不是“拉伸”或“压缩”，是“选哪个方向撑满”
background-size: cover 在移动端经常失效
不是 cover 失效，而是 viewport 缩放、图片分辨率、DPR 导致渲染偏差。尤其 iOS Safari 对高 DPR 图片处理更激进，有时会把本该 cover 的图“多缩一次”。
- 强制重置缩放：
background-size: cover !important（仅调试用） - 确保图片本身足够大（建议 ≥ 2× 容器最大可能尺寸）
- 避免同时用
background-attachment: fixed—— 在 iOS 上会触发独立图层，干扰cover计算 - 用
background-position: center center配合cover，防止因小数像素偏移导致边缘露白
如何让 cover 效果稳定且可维护
靠单个 background-size: cover 很难兜住所有场景，真正稳定得配合定位、裁剪和 fallback。
- 必加
background-position: center，否则不同尺寸下焦点偏移明显 - 用
background-repeat: no-repeat显式关闭重复（虽然 cover 默认不重复，但显式写更防误） - 给
background-image加linear-gradient叠加层（如background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(...)），避免纯色背景暴露裁剪边界 - 服务端图片路径尽量带尺寸参数（如
?w=1920&h=1080），前端不再依赖 CSS 裁剪原始大图
cover 看似简单，但它的“覆盖”是动态计算的结果，不是固定效果。每次改容器尺寸、换图源、切设备，都要重新验证裁剪区域是否合理 —— 别信预览，真机截屏才是唯一标准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
