使用 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;
结果如下所示
放大图片
另一方面，您可以在背景中放大图片。这里我们将一个 32x32 像素的图标放大到 300x300 像素
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;
}