虽然问题假设读者已经了解 background-size 的 contain 和 cover 值如何工作，但以下是规范内容的简单英语释义，可以作为快速入门：
background-size: contain 确保整个背景图像适合背景区域，保持其原始纵横比。如果背景区域小于图像，图像将缩小以适合背景区域。如果背景区域比图像更高或更宽，则主图像未占据的区域的任何部分将被图像的重复填充，或者letterboxes/whitespace 如果background-repeat 设置为@987654330 @。
background-size: cover 使背景图像尽可能大，以填满整个背景区域，不留空隙。 cover和100% 100%的区别在于保留了图片的纵横比，不会出现图片不自然的拉伸现象。
请注意，这两个关键字值都不能使用长度、百分比或auto 关键字的任意组合来表示。
那么你什么时候使用一个而不是另一个？个人觉得cover比contain有更多的实际用途，所以我先用那个。1
背景尺寸：封面
background-size: cover 的一个常见用例是全屏布局，其中背景图像细节丰富，例如照片，并且您希望突出显示此图像，尽管是背景而不是主要内容。
您希望图像的大小能够完全覆盖浏览器视口或屏幕，无论视口的纵横比如何，或者图像或视口是纵向还是横向。您不必担心图像的任何部分是否因此而被裁剪，只要图像填满整个背景区域并保持其原始纵横比即可。
这是a layout where the content is housed in a semitransparent white background, which hovers over a full-screen background 的示例。当您增加预览窗格的高度时，请注意图像会自动放大以确保它仍然覆盖整个预览区域。
html {
height: 100%;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
width: 80%;
min-height: 100%;
background-color: rgba(255, 255, 255, 0.5);
margin: 5em auto;
padding: 1em;
}
如果您改用background-size: contain，则会发生背景图像缩小以使整个图像适合预览窗格的情况。这会留下ugly white letterboxes around the image depending on the aspect ratio of the preview pane，这会破坏效果。
背景尺寸：包含
那么，如果background-size: contain 在图像周围留下难看的空白，为什么还要使用它呢？立即想到的一个用例是，如果设计师不关心空白区域，只要整个图像适合背景区域。
这听起来可能有点做作，但考虑到并非每张图片看起来都糟糕周围有空白区域。这就是使用徽标而不是照片的示例实际上最好地展示了这一点，即使您可能不会发现自己使用徽标作为背景图片。
徽标通常是位于空白或完全透明背景上的不规则形状。这会留下一个可以用纯色或不同背景填充的 canvas。使用background-size: contain 将确保整个图像适合背景，而没有任何部分被裁剪，但图像在画布上仍然看起来就像在家里一样。
但它不一定适用于形状不规则的图像。它也可以应用于矩形图像。只要您要求不裁剪背景图像，空白可以被视为合理的权衡，或者根本不是什么大问题。还记得固定宽度的布局吗？基本上可以将background-size: contain 视为这样，但对于背景图像以及纵向和横向方向：如果您可以确保内容始终符合背景图像的边界，那么空白就完全不成问题了。
尽管无论图像是否设置为重复，background-size: contain 都可以工作，但我想不出任何涉及重复背景的好的用例。
1请注意，如果您使用gradient 作为背景，则contain 和cover 都不起作用，因为渐变没有任何固有尺寸。在这两种情况下，渐变都会拉伸以覆盖容器，就像您指定了100% 100%。