CSS Backgrounds and Borders: Scaling background images
该background-sizeCSS属性使得它可以调整背景图像的宽度和高度，从而覆盖在它们的全尺寸瓷砖背景图片的默认行为。您可以根据需要向上或向下缩放图像。
平铺一个大的图像
让我们考虑一个大的图像，一个2982x2808 Firefox标志图像。我们希望（出于某种原因可能涉及恐怖的不良网站设计）将这个图像的四个副本拼贴成一个300x300像素的元素。要做到这一点，我们可以使用background-size150像素的固定值。
HTML
<div class="tiledBackground">
</div>CSS
.tiledBackground {
background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
background-size: 150px;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}结果
拉伸图像
还可以指定图像的水平和垂直大小，如下所示：
background-size: 300px 150px;结果如下：
放大图像
另一方面，您可以在后台缩放图像。在这里，我们将32x32像素图标缩放为300x300像素：
.square2 {
background-image: url(?developer/section/1072225/favicon.png);
background-size: 300px;
width: 300px;
height: 300px;
border: 2px solid;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}正如你所看到的，CSS实际上是相同的，保存图像文件的名称。
特殊值：“"contain" and "cover"
除了<length>价值观的background-sizeCSS属性提供了两个特殊的尺寸值，contain和cover。我们来看看这些。
contain
该contain值指定无论包含框的大小如何，都应缩放背景图像，以使每一边尽可能大而不超过容器相应边的长度。尝试调整下面的示例以查看此操作。
HTML
<div class="bgSizeContain">
<p>Try resizing this element!</p>
</div>CSS
.bgSizeContain {
background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
background-size: contain;
width: 160px;
height: 160px;
border: 2px solid;
color: pink;
resize: both;
overflow: scroll;
}结果
cover
该cover值指定背景图像的尺寸应尽可能小，同时确保两个尺寸均大于或等于容器的相应尺寸。尝试调整下面的示例以查看此操作。
HTML
<div class="bgSizeCover">
<p>Try resizing this element!</p>
</div>CSS
.bgSizeCover {
background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
background-size: cover;
width: 160px;
height: 160px;
border: 2px solid;
color: pink;
resize: both;
overflow: scroll;
}结果
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
