没有办法使用CSS自动调整背景图像大小。

正如其他人所提到的，您可以通过测量服务器上的背景图像，然后将这些属性应用到div来解决这个问题。

你也可以修改一些javascript来根据图片大小调整div的大小(一旦图片已经下载)——这基本上是一样的事情。

如果你需要你的div自动适应图像，我可能会问你为什么不放一个<img>标签在你的div?

这个怎么样?

.fixed-centered-covers-entire-page { 保证金:汽车; 背景图片:url (https://i.imgur.com/Ljd0YBi.jpg); 平铺方式:不再重演;background-size:封面; 背景位置:50%; background - color: # fff; 左:0; 右:0; 上图:0; 底部:0; z - index: 1; 位置:固定; ｝ < div class = " fixed-centered-covers-entire-page " > < / div >

演示:http://jsfiddle.net/josephmcasey/KhPaF/

在Umbraco CMS中有这个问题，在这种情况下，你可以使用div的'style'属性将图像添加到div:

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

如果你在构建时知道图像的比例，想要基于窗口高度的高度，并且你可以针对现代浏览器(IE9+)，那么你可以使用视口单元:

.width-ratio-of-height {
  overflow-x: scroll;
  height: 100vh;
  width: 500vh; /* width here is 5x height */
  background-image: url("http://placehold.it/5000x1000");
  background-size: cover;
}

不完全是OP的要求，但可能很适合很多人看到这个问题，所以想在这里给出另一个选择。

小提琴:https://jsfiddle.net/6Lkzdnge/

我会做相反的事情，将图像放在主div中，宽度为100%，这将使div和图像都响应屏幕大小，

然后在主div的宽度和高度为100%的绝对定位div中添加内容。

<div class="main" style="position: relative; width: 100%;">
    <img src="your_image.png" style="width: 100%;">
    <div style="position: absolute; width: 100%; height: 100%; display: flex...">
            YOUR CONTENT
    </div>
</div>

如果它是一个单一的预定背景图像，你想要div在不扭曲背景图像的纵横比的情况下进行响应，你可以首先计算图像的纵横比，然后创建一个div，通过以下步骤保持它的纵横比:

假设你想要一个4/1的纵横比，div的宽度是32%:

div {
  width: 32%; 
  padding-bottom: 8%; 
}

这是因为填充是根据包含元素的宽度计算的。