背景大小封面不起作用 [英] Background size cover is not working

问题描述

我的PNG图片尺寸是1000px×1000px。
我在一个高度为550px， background-size：cover 属性的DIV中用它作为背景图片。

我的问题是，这个背景大小的封面似乎没有工作。我的照片没有缩小到DIV的大小。这是什么问题？

解决方案没有看到你的实际代码，答案只能基于假设，但我假设在这种情况下，我的假设必须是正确的，基于所提供的截图。

从屏幕截图看，您的元素似乎没有固定宽度，占用了可用宽度的100％，并且 宽度比高度 元素。

（上述假设已由您的实时链接确认。）

---

根据规范， cover 关键字具有以下定义：

封面

与contains相反的关键字。缩放图像尽可能大，并且 保持图像宽高比 （图像不会被挤压）。图像覆盖容器的整个宽度或高度。 当图片和容器的尺寸不同时，图片会左右剪切或顶部/底部剪辑。

强调与这个问题相关的关键部分。如您所示，在这种情况下，图像的尺寸为1000 x 1000，而容器的尺寸为 [Y] x 550其中 [Y] 似乎高于550.现在，让我们假设 [Y] 是750.这意味着图像将被缩放这样它必须适合整个宽度（因为它更大）。由于图像的宽高比为1：1，因此它将缩小到750 x 750.因此，图像的高度大于容器的高度，因此图像的底部会被裁剪掉。

你也可以在下面的代码片段中看到。第一张图片的背景是 cover ，而第二张图片是实际尺寸的图片。

div {height：550px; background-image：url（http://lorempixel.com/1000/1000/nature/1）; background-position：center center; background-size：cover; background-repeat：no-repeat;}

< div> ;< / div>< img src ='http：//lorempixel.com/1000/1000/nature/1'/>

您可以使用 background-size：100％100％，它会使图像填充整个容器的高度和宽度，但它不会保留/保持图像的纵横比。

或者，您可以使用背景-size：包含，它将保留宽高比，但如果宽度较大（或）在顶部和底部（如果高度较大），则会在左侧和右侧留出空白区域。 p>

宽度越大的演示：
$ b

div {height：550px; background-image：url（http://lorempixel.com/1000/1000/nature/1）; background-position：center center; background-size：包含; background-repeat：no-repeat;}

< div> ;< / div>< img src ='http：//lorempixel.com/1000/1000/nature/1'/>

高度越大的演示：



  div {height：550px; background-image：url（http://lorempixel.com/1000/1000/nature/1）; background-position：center center; background-size：包含;背景重复：不重复; max-width：450px; / *仅用于演示* / border：1px solid;}  

< div>< / div>< img src ='http：//lorempixel.com/1000/1000/nature/1'/>

My PNG picture size is 1000px by 1000px. I use it as a background image in a DIV which has a height of 550px and a background-size: cover property.

My issue is that this background-size cover does not seem to be working. My picture is not scaled down to the size of the DIV. What is the issue?

解决方案

Without seeing your actual code, answers can only be based on assumptions but I am assuming that my assumption must be correct in this case based on the screenshot provided.

From the screenshot, it seems like your element doesn't have a fixed width and is taking up 100% of the available width and also that the width is a lot higher compare to the height of the element.

(The above assumption has been confirmed by your live link.)

---

As per specs, the cover keyword has the following definition:

cover

A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

The key parts that are relevant for this question have been emphasized. As you have indicated, in this case, the image's dimensions is 1000 x 1000 whereas the container's dimensions is [Y] x 550 where [Y] seems to be higher than 550. Now, let us assume that [Y] is 750. This would mean that the image will be scaled such that it has to fit the entire width (as it is larger). Since image has 1:1 aspect ratio, it would be scaled down to 750 x 750. Thus the image's height is greater than the container's height and so the bottom part of the image will get cropped.

You can see that in the below snippet also. The first image is the background with cover whereas the second is the actual sized image.

div {
  height: 550px;
  background-image: url(http://lorempixel.com/1000/1000/nature/1);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />

You can use background-size: 100% 100%, it will make the image fill the entire height and width of the container but it will not preserve/maintain the aspect ratio of the image.

Alternately, you could make use of background-size: contain, it would preserve the aspect ratio but it will leave white space on the left and right if the width is larger (or) on the top and bottom if the height is larger.

Demo with width being larger:

div {
  height: 550px;
  background-image: url(http://lorempixel.com/1000/1000/nature/1);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />

Demo with height being larger:

div {
  height: 550px;
  background-image: url(http://lorempixel.com/1000/1000/nature/1);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 450px;
  /* just for demo */
  border: 1px solid;
}

<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />

这篇关于背景大小封面不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！