背景尺寸覆盖不起作用

Question

我的 PNG 图片大小是 1000px x 1000px。我将它用作高度为 550px 的 DIV 和 background-size: cover 属性.

中的背景图像

我的问题是这个背景尺寸的封面似乎不起作用。我的图片没有缩小到DIV的大小。有什么问题？

Answer 1

改为使用 background-size 100% 100%，应该可以解决问题。

Answer 2

在没有看到您的实际代码的情况下，答案只能基于假设，但根据提供的屏幕截图，我假设在这种情况下我的假设一定是正确的。

从屏幕截图来看，您的元素似乎没有固定宽度，占用了 100% 的可用宽度，而且 宽度要高得多与元素的高度进行比较。

(以上假设已被您的直播证实link.)

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

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.

强调了与本题相关的关键部分。正如您所指出的，在这种情况下，图像的尺寸为 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%，它会使图像填满容器的整个高度和宽度，但不会 preserve/maintain 图像的纵横比。

或者，您可以使用 background-size: contain，它会保留纵横比，但如果宽度较大（或）在顶部，它会在左侧和右侧留下白色 space如果高度较大，则为底部。

宽度更大的Demo：

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:

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' />

背景尺寸覆盖不起作用

Background size cover is not working

html

css

background-size