background-size:cover 和 background-size:contain 的区别 [英] Difference between background-size:cover and background-size:contain

问题描述

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

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.

我也只能找到相当模糊的解释，尤其是我发现 W3C 文档 真是莫名其妙.

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

值的含义如下:

‘包含’

缩放图像，同时保留其固有纵横比(如果有的话)，最大尺寸，使其宽度和高度可以放在背景定位区域内.

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.

封面"

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

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?

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

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

注意

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

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

推荐答案

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

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.

注意: 纵横比=宽/高

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 两种情况下的条件相反.

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

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

This is what makes cover to 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.

问.可以用百分比代替吗?

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

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

问.在哪些情况下我应该更喜欢其中一种?

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

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

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

contain on 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 contain and set background-repeat to repeat-y). But a more appropriate use for contain would be for a fixed height/width element.

这篇关于background-size:cover 和 background-size:contain 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！