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

平铺大图片

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

HTML

html

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;

}

结果

拉伸图片

您还可以指定图片的水平和垂直大小，如下所示

cssbackground-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

除了 值，background-size CSS 属性还提供了两个特殊的尺寸值：contain 和 cover。让我们来看看这些。

contain

contain 值指定，无论包含框的大小如何，背景图片都应缩放，使其每条边尽可能大，同时不超过容器相应边的长度。尝试调整下面的示例大小以查看其效果。

HTML

html

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

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;

}

结果

另见

background-size

background

缩放 SVG 背景指南

帮助改进 MDN

此页面对您有帮助吗？

是

否

了解如何贡献 本页面最后修改于 2025 年 8 月 5 日，由 MDN 贡献者完成。

在 GitHub 上查看此页面 • 报告此内容问题