缩放背景图像

CSS 的  background-size 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。

拼一张大图

来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里（出于某种原因，很可能是某个非常糟糕的网站设计），最终的效果如下：

screenshot1.png

用下面的 CSS 可以实现这种效果：

.square {
  width: 300px;
  height: 300px;
  background-image: url(fxlogo.png);
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
  background-size: 150px;
}
没必要再用带前缀的 background-size 了，尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。

拉伸图片

你可以同时指定图片纵向和横向的大小，如下：

background-size: 300px 150px;

结果会是这样的：
screenshot3.png

放大图片

另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：

screenshot2.png

.square2 {
  width: 300px;
  height: 300px;
  background-image: url(favicon.png);
  background-size: 300px;
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

正如你所看到的，CSS 的写法实际上是基本相同的。

特殊值:  "contain" 和 "cover"

除了<length> 值外，background-size 还提供了另外两个特殊的尺寸值：contain 和 cover。

contain

contain 值指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，来看看下方这个例子。

<div class="bgSizeContain">
  <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p>
</div>
.bgSizeContain {
  height: 200px;
  background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
  background-size: contain;
  border: 2px solid darkgray;
  color: #000; text-shadow: 1px 1px 0 #fff;
}

cover

cover 属性指定背景图可以被调整到任意大小，以使背景图完全覆盖背景区域。

<div class="bgSizeCover">
  <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p>
</div>
.bgSizeCover {
  height: 200px;
  background-image: url('/files/2917/fxlogo.png');
  background-size: cover;
  border: 2px solid darkgray;
  color: #000;
  text-shadow: 1px 1px 0 #fff;
}

另请参阅