background-size:cover 和 background-size:contain 之间的区别

Question

在视觉上我能体会到差异，但在哪些情况下我应该更喜欢其中一种呢？使用它们有什么意义吗？或者它们可以用百分比代替吗？

目前，在使用这些属性时，我似乎无法超越试错法，这让我很头疼。

而且我只能找到非常模糊的解释，尤其是我发现 W3C doc 非常莫名其妙。

Values have the following meanings:

‘contain’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

‘cover’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

我可能有点厚，但是谁能给我一个通俗易懂的英文解释和相关例子？

请使用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;
}

注意

接受的答案是我目前认为最简洁和完整的答案。感谢大家的帮助。

Answer 1

background-size:contain;

使用 contain 时，您可能仍会看到空白，这是由于它在元素中调整大小和包含自身的方式。

background-size:cover;

将完全覆盖所述元素，您将看不到任何空白

来源：

http://www.css3.info/preview/background-size/

见示例 H

编辑：在以下情况下使用 background-size:contain：您希望它使您的图像始终显示在视口中。请注意：虽然您可以看到完整的图像，但当浏览器的纵横比与 window 不相同时，它会在图像的顶部或底部留下白色间距。

在以下情况下使用 background-size:cover：你想要一个背景图片，但你不希望 contain 确实有的白色间距的负面影响，请注意：当使用 background-size:cover; 时，你可能会遇到它会切断一些图像。

来源：http://alistapart.com/article/supersize-that-background-please

Answer 2

background-size:cover 将用图像覆盖整个 div。这对于显示主图像的缩略图很有用，其中显示的整个图像并不那么重要，但您仍然希望符合所有图像的大小。（例如，博客 post 节选）

background-size:contain 将在 div 内显示整个图像。如果您特别想显示整个图像，但在设置的容器 div 大小内，这会很有用。（例如，公司徽标的集合）

两者都保持图像的纵横比相同

http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg

Answer 3

虽然这个问题假定 reader 已经理解 contain 和 cover 值 background-size 是如何工作的，但这里是规范所说内容的简单英语释义，可以作为快速入门：

background-size: contain 确保整个背景图像适合背景区域，并保持其原始纵横比。如果背景区域小于图像，图像将缩小以适应背景区域。如果背景区域比图像高或宽，则主图像未占据的区域的任何部分将被图像的重复填充，或者 letterboxes/whitespace 如果 background-repeat 设置为 no-repeat.
background-size: cover 使背景图像尽可能大，以填满整个背景区域，不留空隙。 cover 和 100% 100% 的区别是保留了图像的纵横比，因此不会出现不自然的图像拉伸。

请注意，这两个关键字值都不能使用长度、百分比或 auto 关键字的任意组合来表示。

那么你什么时候使用一个而不是另一个？我个人认为cover比contain更有实用性，所以我先说¹

背景尺寸：覆盖

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，破坏了效果。

背景大小：包含

如果图像周围留下丑陋的空白 space，为什么还要使用 background-size: contain？立即想到的一个用例是，如果设计人员不关心空白 space，只要整个图像适合背景区域即可。

这听起来可能有些做作，但考虑到并不是每张图片看起来 都不好 ，周围都是空的 space。这是使用徽标而不是照片的示例实际上最好地展示了这一点，即使您可能不会发现自己使用徽标作为背景图像。

徽标通常是一个不规则的形状，位于空白或完全透明的背景上。这留下了一个 canvas 可以用纯色或不同的背景填充。使用 background-size: contain 将确保整个图像适合背景而没有任何部分被裁剪掉，但图像在 canvas.

上看起来仍然很正常。

但它不一定适用于形状不规则的图像。它也可以应用于矩形图像。只要您要求不裁剪背景图像，whitespace 要么被视为合理的权衡，要么根本不是什么大问题。还记得固定宽度的布局吗？认为 background-size: contain 本质上是这样，但对于背景图像以及纵向和横向方向：如果您可以确保内容始终适合背景图像的边界，那么白色 space完全成为非问题。

虽然 background-size: contain 无论图像是否设置为重复都可以工作，但我想不出涉及重复背景的任何好的用例。

¹ _{请注意，如果您使用 gradient 作为背景，contain 和 cover没有效果，因为渐变没有任何内在维度。在这两种情况下，渐变都会拉伸以覆盖容器，就好像您指定了 100% 100%.}

Answer 4

您可以考虑查看管理输出的伪代码。分配给图像大小的值直接取决于容器的纵横比 wrt 背景图像的纵横比。

注： 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 另一方面可以在您使用重复背景时使用（例如，当您的图案图像具有非常高的宽高比 wrt veiwport/container 你可以使用 contain 并将 background-repeat 设置为 repeat-y)。但是 contain 更合适的用途是固定的 height/width 元素。

Answer 5

包含：- 将图像缩放到最大尺寸，使其宽度和高度都适合内容区域。例子：覆盖：- 将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内。示例：

Answer 6

我们就封面与包含进行了大量讨论，只是想分享一下这个想法：

横向屏幕上的横向图像 - 最好使用封面
横向屏幕上的纵向图像 - 最好使用包含
横向屏幕上的纵向图像 - 最好使用包含
横向屏幕上的纵向图像 - 最好使用包含

插图：

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

https://codepen.io/Kinosura/pen/EGZbdy?editors=1100

background-size:cover 和 background-size:contain 之间的区别

Difference between background-size:cover and background-size:contain

html

css

background

背景尺寸：覆盖

背景大小：包含

包含

封面