背景大小
总体概述
该 background-size 属性使一个控制 background-image 的缩放。它最多需要两个值，它们决定了垂直和水平方向上所得图像的比例/大小。如果属性遗失，则认为 width 和 height 都属于 auto。
如果可以确定，auto 将保持图像的纵横比。高度是可选的，可以认为是 auto。因此，在 256 像素×256 像素图像上，以下所有 background-size 设置将生成高度和宽度为 50 像素的图像：
background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;
因此，如果我们从下面的图片（具有 256 px×256 px 的尺寸）开始，
我们最终会在用户的屏幕上显示 50 像素×50 像素，包含在元素的背景中：
还可以使用百分比值来相对于元素缩放图像。以下示例将生成 200 px×133 px 绘制的图像：
#withbackground {
background-image: url(to/some/background.png);
background-size: 100% 66%;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}
行为取决于 background-origin 。
保持纵横比
previos 部分中的最后一个示例丢失了其原始宽高比。圆形成椭圆形，正方形变成矩形，三角形变成另一个三角形。
长度或百分比方法不够灵活，无法始终保持纵横比。auto 无济于事，因为你可能不知道元素的哪个维度会更大。但是，为了完全覆盖具有图像（和正确的宽高比）的某些区域或者在背景区域中完全包含具有正确宽高比的图像，值 contain 和 cover 提供附加功能。
用于 contain 和 cover 的 eggplanation
对不起的双关语感到抱歉，但我们将使用 Biswarup Ganguly 当天的照片进行演示。让我们说这是你的屏幕，灰色区域在你的可见屏幕之外。为了演示，我们将假设一个 16×9 的比例。
我们想用上面提到的图片作为背景。但是，出于某种原因，我们将图像裁剪为 4x3。我们可以将 background-size 属性设置为固定长度，但我们将重点关注 contain 和 cover。请注意，我还假设我们没有破坏 body 的宽度和/或高度。
contain
contain缩放图像，同时保持其固有的纵横比（如果有的话）到最大尺寸，使得其宽度和高度都可以适合背景定位区域。
这样可以确保背景图像始终完全包含在背景定位区域中，但是，在这种情况下，你的 background-color 可能会填充一些空白区域：
cover
cover缩放图像，同时保持其固有的纵横比（如果有的话）到最小尺寸，使得其宽度和高度都可以完全覆盖背景定位区域。
这可以确保背景图像覆盖所有内容。没有可见的 background-color，但是根据屏幕的比例，很大一部分图像可能会被切断：
用实际代码演示
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
