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

Posted 2023-02-25

【中文标题】background-size:cover 和 background-size:contain 的区别

【英文标题】：Difference between background-size:cover and background-size:contain

【发布时间】：2015-01-14 09:49:01

【问题描述】：

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

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

我也只能找到相当模糊的解释，尤其是我发现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;

注意

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

【问题讨论】：

你见过examples with explanations on MDN吗？

这是一个有趣的问题——规范没有描述这些值的任何实际用例，坦率地说，即使我自己也没有机会使用它们。话虽如此，请记住这两个关键字存在的原因是因为它们不能使用长度/百分比/自动值的任何组合来表达。

我确实认为这个页面的可视化效果很好：tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds

@Vucko：这些例子看起来很做作。为什么有人会使用徽标作为背景，更不用说以任何一种方式调整它的大小了？当然，他们展示了包含和覆盖的工作原理，但正如 OP 所说，他们能够从视觉上欣赏差异，而这并不是他们所要求的。

Have you read this?

【参考方案1】：

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

注意： 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 更合适的用途是固定高度/宽度元素。

【讨论】：

我调整了窗口大小并试图找到关系。这可能是浏览器呈现它们的方式。

【参考方案2】：

虽然问题假设读者已经了解 background-size 的 contain 和 cover 值如何工作，但以下是规范内容的简单英语释义，可以作为快速入门：

background-size: contain 确保整个背景图像适合背景区域，保持其原始纵横比。如果背景区域小于图像，图像将缩小以适合背景区域。如果背景区域比图像更高或更宽，则主图像未占据的区域的任何部分将被图像的重复填充，或者letterboxes/whitespace 如果background-repeat 设置为@987654330 @。

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

背景尺寸：包含

那么，如果background-size: contain 在图像周围留下难看的空白，为什么还要使用它呢？立即想到的一个用例是，如果设计师不关心空白区域，只要整个图像适合背景区域。

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

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

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

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

---

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

【讨论】：

谢谢。有几件事：1）在谈论cover时，您说“无论纵横比如何”。我认为cover 和contain do 都保留了图像的纵横比。 2) 在你的代码中background-position: center center; 真的有必要吗？

@Dura：1）我将编辑我的答案以使其更清晰。看来我也忘了提供contain 的示例。 2）有点——默认位置在左上角，虽然它不会影响图像的缩放方式，但会影响它的定位方式。如果图像看起来更好地锚定在左上角，那很好，但这主要是风格。

感谢您的更新。关于您的最后一点：当图像是图案时，我可以想到一个重复背景的示例。

【参考方案3】：

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

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

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

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

【讨论】：

谢谢，但这并没有真正提到在哪些情况下我应该使用其中一种。

@Dura 我已尝试添加两个场景以应用于这些场景，希望它们有所帮助！

【参考方案4】：

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

【讨论】：

谢谢，这似乎在正确的轨道上，但它仍然缺少用例。

【参考方案5】：

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

【参考方案6】：

我们就封面与包含进行了激烈的对话，只是想分享一下这个想法：

横向屏幕上的横向图像 - 最好使用 cover

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

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

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

插图：

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

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