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

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

提问by U r s u s

Visually I can appreciate the difference, but in which situations should I prefer one over the other? Is there any point using them at all or can they be replaced by percentages?

视觉上我可以欣赏这种差异，但在哪些情况下我应该更喜欢一种？使用它们有什么意义还是可以用百分比代替？

Currently I don't seem to be able to go beyond a trial-error approach when using these properties, which does my head in.

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

Also I can only find pretty vague explanations and especially I find the W3C docquite baffling.

此外，我只能找到非常模糊的解释，尤其是我发现W3C 文档非常令人困惑。

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.

值具有以下含义：

'包含'

将图像缩放到最大尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都适合背景定位区域。

'覆盖'

将图像缩放到最小尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。

I'm probably being a bit thick, but can anyone give me a plain English explanation with relative examples?

我可能有点厚，但谁能给我一个简单的英文解释和相关的例子？

Please use this fiddle. Thanks.

请使用这个小提琴。谢谢。

CSS

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;
}

Note

笔记

The accepted answer is the one I currently find the most concise and complete. Thanks everybody for their help.

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

回答by The Pragmatick

You can consider looking at the pseudocodes that govern the output. The values allotted to the image's size depend directly on the aspect ratios of container wrt aspect ratio of the background image.

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

Note:Aspect ratio = width / height

笔记：Aspect ratio = width / height

Contain

包含

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

---

---

Cover

覆盖

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

You see the relation? In both coverand contain, aspect ratio is preserved. But the if - else conditions reverse in both the cases.

你看到关系了吗？在cover和 中contain，都保留了纵横比。但是 if - else 条件在这两种情况下都是相反的。

This is what makes coverto cover full page, without any white portion visible. When aspect ratio of container is greater, scaling image so that its width becomes equal to container width. Now, height will be greater, as aspect ratio is smaller. Thus it covers the whole page without any white portion.

这就是cover覆盖整页的原因，没有任何可见的白色部分。当容器的纵横比较大时，缩放图像使其宽度等于容器宽度。现在，高度会更大，因为纵横比更小。因此它覆盖了整个页面，没有任何白色部分。

Q. Can they be replaced by percentages?

问：它们可以用百分比代替吗？

No, not simply by percentages. You'll need conditioning.

不，不仅仅是百分比。你需要调理。

Q. In which situations should I prefer one over the other?

问：在哪些情况下我应该更喜欢一种？

When you are creating a website, you wouldn't want any white portion in the fixed background. So use cover.

创建网站时，您不希望固定背景中有任何白色部分。所以使用cover.

containon the other can be used when you are using a repeating background (e.g. when you have a pattern image with very high aspect ratio wrt veiwport/container you can use containand set background-repeatto repeat-y). But a more appropriate use for containwould be for a fixed height/width element.

contain另一个可以在您使用重复背景时使用（例如，当您有一个具有非常高纵横比 wrt veiwport/container 的图案图像时，您可以使用contain并设置background-repeat为repeat-y）。但更合适的用途contain是用于固定高度/宽度的元素。

回答by BoltClock

Although the question assumes the reader already understands how the containand covervalues for background-sizework, here's a plain-English paraphrasing of what the spec says, which can serve as a quick primer:

虽然这个问题假设读者已经理解了工作原理contain和cover价值background-size，但这里有一个简单的英语解释规范所说的内容，可以作为快速入门：

• background-size: containensures that the entire background image will fit the background area, keeping its original aspect ratio. If the background area is smaller than the image, the image will shrink so that it can fit the background area. If the background area is either taller or wider than the image, then any parts of the area not occupied by the main image will either be filled by repetitions of the image, or letterboxes/whitespace if background-repeatis set to no-repeat.

• background-size: covermakes the background image as large as possible such that it will fill the entire background area leaving no gaps. The difference between coverand 100% 100%is that the aspect ratio of the image is preserved, so no unnatural stretching of the image occurs.

• background-size: contain确保整个背景图像适合背景区域，保持其原始纵横比。如果背景区域小于图像，图像将缩小以适应背景区域。如果背景区域比图像高或宽，则主图像未占据的区域的任何部分将被图像的重复填充，或信箱/空白（如果background-repeat设置为 ）no-repeat。

• background-size: cover使背景图像尽可能大，这样它将填充整个背景区域，不留空隙。cover和之间的区别在于100% 100%保留了图像的纵横比，因此不会出现图像的不自然拉伸。

Note that neither of these two keyword values can be expressed using any combination of lengths, percentages, or autokeywords.

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

So when do you use one over the other? Personally, I think coverhas more practical uses than contain, so I will go with that first.¹

那么你什么时候使用一个？就个人而言，我认为cover它比 有更多的实际用途contain，因此我将首先使用它。¹

background-size: cover

背景尺寸：封面

One common use case of background-size: coveris in a full-screen layout where the background image is rich in detail, such as a photo, and you want to feature this image prominently, albeit as a background as opposed to the main content.

一个常见的用例background-size: cover是在全屏布局中，其中背景图像具有丰富的细节，例如照片，并且您希望将此图像突出显示，尽管作为背景而不是主要内容。

You want just enough of the image to be able to completely cover the browser viewport or screen, regardless of the aspect ratio of the viewport, or whether the image or the viewport is in portrait or landscape. You're not concerned if any parts of the image are cropped out as a result of this, as long as the image fills up the entire background area and maintains its original aspect ratio.

无论视口的纵横比如何，或者图像或视口是纵向还是横向，您都需要足够的图像能够完全覆盖浏览器视口或屏幕。只要图像填满整个背景区域并保持其原始纵横比，您就不必担心图像的任何部分是否因此而被裁剪掉。

Here's an example of a layout where the content is housed in a semitransparent white background, which hovers over a full-screen background. When you increase the height of the preview pane, notice that the image automatically scales up to ensure that it still covers the entire preview area.

这是一个布局示例，其中内容位于半透明的白色背景中，悬停在全屏背景上。当您增加预览窗格的高度时，请注意图像会自动放大以确保它仍然覆盖整个预览区域。

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;
}

If you use background-size: containinstead, what happens is that the background image shrinks in order for the entire image to fit in the preview pane. This leaves ugly white letterboxes around the image depending on the aspect ratio of the preview pane, which ruins the effect.

如果您background-size: contain改为使用，则会发生背景图像缩小以使整个图像适合预览窗格的情况。根据预览窗格的纵横比，这会在图像周围留下难看的白色信箱，这会破坏效果。

background-size: contain

背景大小：包含

So why would one use background-size: containif it leaves ugly blank spaces around the image? One use case that immediately comes to mind is if the designer doesn't care about the blank spaces, so long as the entire image fits within the background area.

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

That may sound contrived, but consider that not every image looks badwith empty space around it. This is where the example of using a logo instead of a photo actually demonstrates this best, even though you probably won't find yourself using a logo as a background image.

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

A logo is typically an irregular shape sitting on either a blank or completely transparent background. This leaves a canvasthat can be filled by a solid color or a different background. Using background-size: containwill ensure that the entire image fits the background without any parts of it being cropped out, but the image still looks right at home on the canvas.

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

But it doesn't necessarily have to apply to an irregularly-shaped image. It can apply to rectangular images as well. As long as you require that no cropping of the background image occurs, whitespace can either be seen as a reasonable tradeoff, or not a big deal at all. Remember fixed-width layouts? Think of background-size: containas essentially that, but for background images and in both portrait and landscape orientations: if you can ensure that the content will always fit the boundaries of the background image at all times, then whitespace becomes a non-issue altogether.

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

Although background-size: containwill work whether or not the image is set to repeat, I can't think of any good use cases involving repeating backgrounds.

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

---

---

¹_{Note that if you're using a gradientas a background, both containand coverhave no effect because gradients do not have any intrinsic dimensions. In both cases, the gradient will stretch to cover the container, as though you had specified 100% 100%.}

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

回答by Lee

background-size:coverwill cover the entire div with the image. This could be useful for showing thumbnail images of a main image where the entire image being displayed isn't that important, but you still want to conform to a size for all images. (for example, a blog post excerpt)

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

background-size:containwill show the entire image within the div. This can be useful if you specifically want to display the entirety of the images, but within a set container div size. (For example, a collection of company logos)

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

Both keep the image at the same aspect ratio

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

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

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

回答by Gerwin

background-size:contain;

When using containyou may still see white-spacing, due to the way that it sizes and contains itself within the element.

使用时，contain您可能仍然会看到空白，因为它的大小和将自身包含在元素中的方式。

background-size:cover;

will completely cover said element, you will not see any white-spacing

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

source:

来源：

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

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

see example H

见示例 H

edit: use background-size:containif: You want it so that your image is always displayed in the viewport. Please note that: while you can see the full image, it will leave white spacing either on the top or bottom of the image whenever the aspect ratio of the browser and window are not the same.

编辑：background-size:contain如果：您想要它，以便您的图像始终显示在视口中。请注意：虽然您可以看到完整的图像，但当浏览器和窗口的纵横比不同时，它会在图像的顶部或底部留下空白。

use background-size:coverif: You want a background-image, but you don't want the negative effect of the white-spacing which contain does have, please note that: when using background-size:cover;you may experience that it will cut off some of the image.

使用background-size:cover如果：您想要一个背景图像，但您不希望包含的空白间距的负面影响，请注意：使用时background-size:cover;您可能会遇到它会切断一些图像。

source: http://alistapart.com/article/supersize-that-background-please

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

回答by Bhagirath sheela

Contain:- Scale the image to the largest size such that both its width and its height can fit inside the content area. Exmaple: Cover:-Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. Example:

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

回答by Gleb Dolzikov

We had a huge conversation about cover vs contain just want to share this thoughts:

我们就封面与包含进行了大量对话，只是想分享以下想法：

1. landscape image on landscape screen - best to use cover

2. portrait image on landscape screen - best to use contain

3. portrait image on landscape screen - best to use contain

4. portrait image on landscape screen - best to use contain

1. 横向屏幕上的横向图像 - 最好使用封面

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

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

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

Illustration:

插图：

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

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

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