css background size cover 和 contain 区别_图片适配方案说明

cover 保证容器完全覆盖但可能裁剪图像，contain 保证图像完整可见但必然留白；前者适用于全屏氛围图，后者适合图标等需保全细节的场景。

background-size: cover 和 contain 的核心行为差异

两者都用于让背景图填满容器，但缩放逻辑完全不同：cover 保证容器被完全覆盖（可能裁剪），contain 保证整张图完整可见（可能留白）。这不是“哪个更好”，而是“你要优先保什么”——是画面不露空，还是内容不被切掉。

什么时候该用 cover？常见误用场景

适合全屏 Banner、氛围图、无关键信息的装饰性背景。容易踩的坑是直接套在含文字的卡片上，导致文字区域被图片重点部位遮挡或拉伸变形。

• cover 会按比例缩放图片，再居中裁剪，**裁剪位置不可控**（始终以图片中心为锚点）
• 如果原图宽高比和容器差异大，顶部/底部/左右必有部分被切掉，无法通过 CSS 指定保留哪一块
• 响应式时，容器尺寸变化会动态重算裁剪区域，小屏幕可能突然切掉人脸或标题文字

div {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center; /* 默认就是 center，显式写出来更可控 */
}

contain 更适合哪些具体需求？

适用于图标、产品截图、带文字说明的示意图等——图像本身是信息载体，不能丢细节。但要注意它只解决“显示全”，不解决“是否够大”。

• contain 缩放后整图放入容器，**必定留白**（除非图和容器比例刚好一致）
• 留白位置由 background-position 决定，默认 center，可改用 top left 把图压到左上角
• 当容器很宽很高时，图片可能缩得极小，视觉上几乎看不见，需配合 min-width/min-height 或媒体查询兜底

img-icon {
  background-image: url("logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center; /* 左对齐，避免右侧大片空白 */
}

cover / contain 都搞不定时的替代方案

真正难的是既要完整显示关键内容，又不能留白——这时靠纯 CSS 的 cover 或 contain 已经不够用。

• 用 object-fit: cover + 标签，配合 background-position 等效属性（如 object-position）手动控制裁剪区域
• 服务端生成多尺寸图，前端用 + srcset 匹配不同 DPR 和视口，比纯 CSS 更精准
• 对重要图像做“焦点区域标注”（如 Adobe 的 Subject Area），再用支持 image-orientation 或 JS 计算的方案动态调整

cover 和 contain 看似简单，但实际项目里，80% 的背景图问题出在没想清楚：你到底是在适配容器，还是在保护图像语义。后者往往需要跳出 background-size 思维。