背景大小之间的差异：cover和background-size：contains [英] Difference between background-size:cover and background-size:contain

问题描述

视觉上，我可以欣赏的区别，但在哪些情况下，我应该喜欢一个比另一个？
是否有任何点使用它们或者可以用百分比替换它们？

目前我似乎不能超越试用版，使用这些属性，这是我的头。

此外，我只能找到相当模糊的解释，特别是我发现 W3C doc 比较令人不解。

值具有以下含义：

'contains'

缩放图片，同时保留其内在宽高比
（如果有的话），最大的尺寸，使其宽度和高度
可以适合在背景定位区域内。

'

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

我可能有点厚，但任何人都可以给我一个简单的英语解释有相关例子吗？

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

CSS

  {
 width：500px; 
 height：500px; 
 background：url（http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg）; 
 background-size：contains; 
 background-repeat：no-repeat; 
} 
  

/ p>

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

解决方案

你可以考虑看看控制输出的伪代码。分配给图片大小的值直接取决于背景图片的容器宽高比的宽高比。

注意： 长宽比=宽度/高度

/ strong>

  if（容器的长宽比>图像的宽高比）
 image-height = 
 image-width = aspect-ratio保留宽度
 
 else 
 image-width =容器宽度
 image-height =宽高比保留高度
  

---

盖

  if（容器的纵横比>图像的纵横比）
 image-width = container width 
 image-height = aspect-ratio-preserved height 
 
 else 
 image-height = container height 
 image-width = aspect-ratio-preserved width 
  

你看到的关系？在 cover 和中都包含，将保留宽高比。

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

Q。可以用百分比替换它们吗？

不是，不是简单的百分比。您需要调节。

Q。

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

/ strong>在另一个可以使用当你使用重复的背景（例如，当你有一个非常高的宽高比的图形图像wrt veiwport / container你可以使用 contains ，并将 background-repeat 设置为 repeat-y ）。但是对于包含的更适当的用法将是固定的height / width元素。

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 doc quite baffling.

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

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.

解决方案

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

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 cover and contain, aspect ratio is preserved. But the if - else conditions reverse in both the cases.

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.

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.

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.

这篇关于背景大小之间的差异：cover和background-size：contains的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！