CSS Backgrounds and Borders: Scaling background images

CSS背景和边界：缩放背景图像

该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(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;
}