调整背景图片的大小

铺开大图像

让我们考虑一张大图片，一张 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 像素大小的 favicon 放大到了 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”

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

contain

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;

color: pink;

resize: both;

overflow: scroll;

}

结果

cover

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;

color: pink;

resize: both;

overflow: scroll;

}

结果

参见

background-size

background

缩放 SVG 背景

Help improve MDN

Was this page helpful to you?

Yes

No

Learn how to contribute

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content