当使用“cover”背景大小和绝对定位时，背景图像何时停止调整大小？

Question

当使用“cover”背景大小和绝对定位时，背景图像何时停止调整大小？

3

假设我们有一张设置为 div 背景的图片。这个 div 是绝对定位的，而图片处于 background-size: cover 模式。在这种情况下，背景图片会被重新调整大小。但是在某个时刻，背景图片的宽度和高度将相等。如何计算图像停止调整大小的尺寸呢？这并不直接关系到图像或容器的宽度或高度。我无法找到任何相关文档。CSS

.bg {
  background-image: url("http://www.adweek.com/wp-content/uploads/files/blogs/istock-unfinished-business-hed-2015.jpg");
  width:100%;
  height:100%;
  background-size:cover;
  background-repeat: no-repeat;
  position:absolute;
}

HTML

<body>
    <div class="bg"></div>
</body>

JSFiddle

https://jsfiddle.net/fbng74dm/

更新

一些示例值(大约):

容器高度976
容器在宽度1540处停止调整背景图像大小

容器高度729
容器在宽度1147处停止调整背景图像大小

容器高度643
容器在宽度1010处停止调整背景图像大小

背景图像高度2827
背景图像宽度4465

- Arkadiusz Kałkus

当你缩小（不是放大）到某个点时，它会停止调整大小。在那一点之后，图像将从右侧裁剪（您将窗口移动使其变小，图像不会重新调整大小，而是被切割）。 - Arkadiusz Kałkus

2个回答

0

您可以使用@media查询，使背景大小在屏幕达到一定宽度时停止使用cover。例如：

.bg {
  background-image: url("http://www.adweek.com/wp-content/uploads/files/blogs/istock-unfinished-business-hed-2015.jpg");
  width:100%;
  height:100%;
  position:absolute;
}
@media(max-width: 600px){
  .bg{
    background-size:cover;
    background-repeat:no-repeat;
  }
}
@media(min-width: 601px){
  .bg{
     background-size:auto;
   }
}

这意味着在窗口宽度不超过600像素时，背景将会使用cover，而在窗口宽度大于或等于601像素时，背景将会使用auto。

- RobertAKARobin

对不起，这不是我问题的答案。 - Arkadiusz Kałkus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anonymous · Accepted Answer

如果宽度很大，图像会被缩放，因此无法看到完整的高度。当容器的尺寸减小时，可以塞入容器中的高度就会变得更多。一旦可以看到完整的高度，就不应再调整图像大小，因为那样就无法覆盖容器了。

为什么？让我们看一个例子，假设我们不停地调整背景图片大小：

var aspectRatio = 1920 / 1280;
var bg = document.getElementsByClassName('bg')[0];
window.addEventListener('resize', resizeListener);

function resizeListener() {
 if (bg.offsetWidth / bg.offsetHeight <= aspectRatio) {
   bg.className = 'bg small';
  } else {
   bg.className = 'bg';
  }
}

* {
  margin: 0;
  padding: 0;
}

.bg {
  background-image: url("http://www.adweek.com/wp-content/uploads/files/blogs/istock-unfinished-business-hed-2015.jpg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
}

.small {
  background-size: contain;
}

<div class="bg">
</div>

试试在JSFiddle上测试它！

你会发现，背景图片不再完全覆盖整个背景，但我们已经设置了background-size: cover;。这就是为什么它保留其高度并从侧面突出的原因。

什么时候会达到这个点？正如您在我的代码示例中已经看到的那样，一旦容器的纵横比小于背景图像的纵横比，就会达到这个点。原因很简单：没有其他可能性。试试吧，你不会能够以不同的方式进行操作。这只是因为实际原因。