背景尺寸封面不起作用

Question

我的 PNG 图片大小是 1000 像素 x 1000 像素。 我将它用作 DIV 中的背景图像，其高度为 550 像素， background-size: cover属性。

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

Answer 1

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

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

（以上假设已被您的直播链接所证实。 ）

---

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

封面

与包含相反的关键字。 尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。 图像“覆盖”了容器的整个宽度或高度。 当图像和容器具有不同的尺寸时，图像会被左/右或上/下裁剪。

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

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

宽度较大的演示：

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

高度较大的演示：

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

Answer 2

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