使用 background-size 调整背景图像大小

**background-size** CSS 属性允许你调整元素的背景图像大小，通过指定图像的宽度和/或高度，覆盖默认的平铺图像到其完整大小的行为。通过这样做，你可以根据需要向上或向下缩放图像。

平铺大图像

让我们考虑一个大图像，一个 2982x2808 的 Firefox 徽标图像。我们想要（出于某种原因，可能涉及可怕的糟糕网站设计）将此图像的四个副本平铺到一个 300x300 像素的元素中。为此，我们可以使用 150 像素的固定 background-size 值。

HTML

html
<div class="tiledBackground"></div>

CSS

css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

结果

拉伸图像

你也可以像这样指定图像的水平和垂直大小

css
background-size: 300px 150px;

结果如下所示

Firefox logo stretched

放大图像

另一方面，你可以在背景中放大图像。在这里，我们将一个 32x32 像素的 favicon 缩放至 300x300 像素

MDN Logo scaled

css
.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

如你所见，CSS 实际上基本相同，除了图像文件名称。

特殊值：contain 和 cover

除了 <length> 值之外，background-size CSS 属性还提供了两个特殊的大小值，contain 和 cover。让我们来看看这些。

contain

contain 值指定，无论包含盒的大小如何，背景图像都应进行缩放，以便每一侧都尽可能大，同时不超过容器对应一侧的长度。尝试调整下面示例的大小以查看其效果。

HTML

html
<div class="bgSizeContain">
  <p>Try resizing this element!</p>
</div>

CSS

css
.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  resize: both;
  overflow: scroll;
}

结果

cover

cover 值指定背景图像应进行缩放，以便使其尽可能小，同时确保两个维度都大于或等于容器的对应大小。尝试调整下面示例的大小以查看其效果。

HTML

html
<div class="bgSizeCover">
  <p>Try resizing this element!</p>
</div>

CSS

css
.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  resize: both;
  overflow: scroll;
}

结果

另请参阅