CSS 背景大小: cover 和背景大小: 包含 的区别

在本文中，我们将介绍 CSS 中两个常用的背景大小属性：background-size:cover 和 background-size:contain。这两个属性可以用来调整背景图片的大小以适应元素的尺寸。虽然它们的作用相似，但却有着一些重要的区别。

阅读更多：CSS 教程

背景大小: cover

background-size:cover 属性用于将背景图片扩展或缩小以填充整个元素。无论元素的尺寸是多大还是多小，背景图片都会被拉伸或收缩，以使其完全覆盖元素。如果背景图片的宽高比与元素的宽高比不相同，背景图片可能会被裁剪。

下面是一个示例代码，展示了 background-size:cover 的效果：

div {
  width: 300px;
  height: 200px;
  background-image: url("example.jpg");
  background-size: cover;
}

在上面的示例中，一个宽度为 300px，高度为 200px 的 div 元素会显示一张背景图片，并且这张图片会被拉伸或收缩以填充整个元素。无论元素的尺寸如何变化，背景图片都会始终完全覆盖元素。

背景大小: 包含

background-size:contain 属性用于将背景图片扩展或缩小以适应元素的尺寸，而不会对其进行裁剪。背景图片会根据元素的尺寸进行等比例缩放，以确保整张图片都能显示在元素内部。

下面是一个示例代码，展示了 background-size:contain 的效果：

div {
  width: 300px;
  height: 200px;
  background-image: url("example.jpg");
  background-size: contain;
}

在上面的示例中，一个宽度为 300px，高度为 200px 的 div 元素会显示一张背景图片，并且这张图片会被等比例缩放以适应元素的尺寸。背景图片会保持完整，不会被裁剪。

背景大小: cover vs 包含

现在我们来比较一下 background-size:cover 和 background-size:contain 的区别。

• background-size:cover 填充整个元素，有可能会裁剪部分背景图片，但可以确保整个元素都有背景图。
• background-size:contain 适应元素的尺寸，不裁剪任何背景图片，在元素内完整显示整张背景图。

在选择使用哪个属性时，取决于你对背景图片显示效果的需求。如果你希望背景图片完全覆盖整个元素，可以使用 background-size:cover。如果你希望背景图片适应元素的尺寸，而不被裁剪，可以使用 background-size:contain。

总结

在本文中，我们介绍了 CSS 中 background-size:cover 和 background-size:contain 两个背景大小属性的区别。background-size:cover 会拉伸或缩小背景图片以填充整个元素，并可能裁剪背景图片。background-size:contain 会等比例缩放背景图片以适应元素的尺寸，保持背景图片完整。选择使用哪个属性取决于你对背景图片显示效果的需求。