background-size: cover 和 contain 的核心区别在于图片适应容器的方式。cover 会等比缩放图片以覆盖整个容器，可能裁剪图片；而 contain 会等比缩放以完整显示图片，可能留白。1. cover 常用于全屏背景、卡片封面等需要视觉冲击的场景，优点是填满容器，缺点是可能裁剪关键内容。2. contain 适用于 logo、图标等不可裁剪的场景，优点是完整展示图片，缺点是可能出现空白。选择时根据内容优先级和视觉需求决定：若需填满且可裁剪，用 cover；若需完整显示且可接受留白，用 contain。此外，cover 在移动端更常用，contain 在卡片组件中更安全，搭配 background-position 可优化展示效果。
在CSS中，background-size: cover 和 contain 是两种常见的背景图缩放方式，它们的核心区别在于如何调整图片以适应容器。简单来说：
-
cover会把背景图等比例放大或缩小，直到完全覆盖整个容器，可能会裁剪图片； -
contain会等比缩放图片，确保整张图都显示出来，可能会留白。
下面从具体使用场景出发，详细说明它们的差异和适用情况。
cover：填满容器，可能裁剪图片
使用 background-size: cover 时，浏览器会根据容器的大小，保持图片宽高比进行缩放，使图片刚好覆盖整个容器区域。如果图片的比例与容器不一致，超出部分会被裁剪。
立即学习“前端免费学习笔记（深入）”；
常见用途包括：
- 全屏背景图
- 卡片式设计中的封面图
- 需要视觉冲击力强、允许裁剪的展示场景
举个例子，一个16:9的图片放在4:3的容器里，用 cover 的话，图片宽度会被拉伸到撑满容器，上下部分就会被裁掉。
.container {
background-size: cover;
}优点：
- 图片始终填满容器，视觉上更饱满
- 适合不确定容器尺寸的响应式布局
缺点：
- 图片内容可能被裁剪，关键元素可能显示不全
contain：完整显示图片，可能留下空白
background-size: contain 会将图片按比例缩放，确保整张图都能显示在容器内。如果容器和图片比例不同，就会出现空白区域（比如左右或上下留白）。
适用于：
- 需要完整展示图片内容的场景
- Logo、图标等不能裁剪的关键图像
- 容器比例和图片接近的情况下
例如，一张竖版照片放在横版容器里，用 contain 会自动缩小图片，使其完全显示，但左右两边会有空白。
.container {
background-size: contain;
}优点：
- 图片内容不会被裁剪
- 更容易控制图片展示范围
缺点：
- 可能导致页面出现空白区域，影响整体视觉效果
如何选择cover还是contain？
选哪个主要看你的内容优先级和视觉需求：
- 如果你希望背景图充满整个区域，并且可以接受部分内容被裁剪，就用
cover。 - 如果你必须显示整张图片，不允许裁剪，而且可以接受周围有空隙，就用
contain。
一些小建议：
- 在移动端，
cover更常用，因为屏幕尺寸多变，需要视觉填充。 - 在卡片类组件中，
contain更安全，避免重要内容被裁掉。 - 搭配
background-position使用，可以更好地控制裁剪区域。
总的来说，cover 和 contain 各有优劣，理解它们的行为逻辑后，就能根据实际需求灵活选用。基本上就这些，不复杂但容易忽略细节。
