在视觉上我可以欣赏它的不同之处，但在哪种情况下我更喜欢一个？ 是否有任何意义可以使用它们，还是可以用百分比代替？
目前，在使用这些属性时，我似乎无法超越试错法。
此外，我只能找到相当模糊的解释，特别是我发现W3C doc非常莫名其妙。
值具有以下含义：
“包含”
缩放图像，同时保留其固有的宽高比 （如果有的话），最大尺寸，使其宽度和高度 可以放在背景定位区域内。
“盖”
缩放图像，同时保留其固有的宽高比（如果有的话） 最小尺寸，使其宽度和高度都可以完全 覆盖背景定位区域。
我可能有点厚，但是有人能用相对的例子给我一个简单的英语解释吗？
请使用this fiddle。感谢。
CSS
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-size:contain;
background-repeat:no-repeat;
}
注意
我接受的答案是我目前最简洁和完整的答案。 谢谢大家的帮助。
答案 0 :(得分：36)
您可以考虑查看控制输出的伪代码。分配给图像大小的值直接取决于背景图像的容器长宽比。
注意： Aspect ratio = width / height
if (aspect ratio of container > aspect ratio of image)
image-height = container height
image-width = aspect-ratio-preserved width
else
image-width = container width
image-height = aspect-ratio-preserved height
if (aspect ratio of container > aspect ratio of image)
image-width = container width
image-height = aspect-ratio-preserved height
else
image-height = container height
image-width = aspect-ratio-preserved width
你看到了这种关系？在cover和contain中，都保留了宽高比。但if-else条件在两种情况下都是相反的。
这使得cover覆盖整页，而不会显示任何白色部分。当容器的纵横比较大时，缩放图像使其宽度等于容器宽度。现在，高度将更大，因为纵横比更小。因此它覆盖整个页面而没有任何白色部分。
问。它们可以用百分比代替吗？
不，不仅仅是百分比。你需要调理。
问。我应该在哪种情况下优先选择其他情况？
在创建网站时，您不希望在固定背景中出现任何白色部分。因此，请使用cover。
contain （例如，当您使用具有非常高纵横比的图案图像时，可以使用veiwport / container {{ 1}}并将contain设置为background-repeat）。但repeat-y更适合用于固定的高度/宽度元素。
答案 1 :(得分：15)
虽然这个问题假定读者已经理解了contain的{{1}}和cover值的工作原理，但这里有一个简单的英语解释，即规范所说的，可以作为快速入门：
background-size可确保整个背景图像适合背景区域，保持原始高宽比。如果背景区域小于图像，则图像将缩小，以使其适合背景区域。如果背景区域比图像更高或更宽，则未被主图像占据的区域的任何部分将通过重复图像来填充，或者letterboxes /空白如果background-size: contain是设置为background-repeat。
no-repeat使背景图像尽可能大，以便填充整个背景区域，不留任何间隙。 background-size: cover和cover之间的区别在于图像的纵横比被保留，因此不会出现不自然的图像拉伸。
请注意，这两个关键字值都不能使用长度，百分比或100% 100%关键字的任意组合来表示。
那么你何时使用一个而不是另一个？就个人而言，我认为auto比cover具有更多的实际用途，所以我将首先使用它。 1
contain的一个常见用例是全屏布局，其中背景图片细节丰富，例如照片，并且您希望将此图像突出显示，虽然是背景而不是主要内容。
无论视口的纵横比如何，或者图像或视口是纵向还是横向，您都希望图像能够完全覆盖浏览器视口或屏幕。只要图像填满整个背景区域并保持其原始宽高比，您就不会担心图像的任何部分是否会被裁剪掉。
以下是a layout where the content is housed in a semitransparent white background, which hovers over a full-screen background的示例。当您增加预览窗格的高度时，请注意图像会自动向上缩放以确保它仍然覆盖整个预览区域。
background-size: cover如果您使用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;
}
，则会发生背景图像缩小，以使整个图像适合预览窗格。这留下了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作为背景，则background-size: contain和contain都无效，因为渐变不会有任何内在的维度。在这两种情况下，渐变都将拉伸以覆盖容器，就像您指定了cover一样。
答案 2 :(得分：5)
background-size:cover将用图片覆盖整个div。这对于显示主图像的缩略图图像非常有用，其中显示的整个图像并不重要，但您仍希望符合所有图像的尺寸。 （例如，博客文章摘录）
background-size:contain将在div中显示整个图像。如果您特别想要显示整个图像，但在设置的容器div大小内，这可能很有用。 （例如，公司徽标的集合）
两者都使图像保持相同的宽高比
http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg
答案 3 :(得分：2)
background-size:contain;
使用contain时，您可能仍会看到白色间距，因为它的大小和包含在元素中的方式。
background-size:cover;
将完全覆盖所述元素，您将看不到任何白色间距
源：
http://www.css3.info/preview/background-size/
参见示例H
编辑：使用background-size:contain如果：
您需要它，以便您的图像始终显示在视口中。请注意：虽然您可以看到完整的图像，但只要浏览器和窗口的宽高比不同，它就会在图像的顶部或底部留下白色间距。
使用background-size:cover如果：
你想要一个背景图片，但你不想要包含的白色间距的负面影响，请注意：使用background-size:cover;时你可能会遇到它会切断一些图像。
来源：http://alistapart.com/article/supersize-that-background-please
答案 4 :(得分：0)
包含： - 将图像缩放到最大尺寸，使其宽度和高度都适合内容区域。 〔实施例： 封面： - 将背景图像缩放为尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内的视野中。 例如：
答案 5 :(得分：0)
我们就掩护与包含进行了一场热烈的讨论，只是想分享一下这种想法：
人像图像-最好使用包含
人像图像-最好使用包含
插图：
if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen