Question

为什么当我缩小窗口时，第二个div响应（Background resize true），第二个没有？

＆＃13;

.imga {
  height: 450px;
  background-image: url(https://img15.hostingpics.net/pics/5638130f9bd1dbafdaabbd88d207439290c1dd206e3d68f201696a5e15b2185756a209.png);
  background-size: cover;
}

.imgb {
  height: 450px;
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.pn);
  background-size: cover;
}

＆＃13;

<div class="imga">

</div>

<div class="imgb">

</div>

＆＃13;

谢谢你：）

Answer 1

由于background-size cover：

在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平裁剪，以便不留空的空间。

总结：如果它更小，则扩大。如果它更大，那就削减它。

Answer 2

行为上的差异是由于第一张背景图像高450像素而第二张背景图像较大。

如果将窗口宽度减小到478像素或更小，您会发现第二张图像也不会再调整大小，因为它的高度现在是450像素！

背景响应和封面

2 个答案: