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。 蝉妈妈AI 电商人专属的AI营销助手