添加到原来接受的答案只需添加样式宽度:100%;到内部图像，以便它将自动收缩/扩展的移动设备，而不会在移动视图中采取大的顶部或底部边距。

<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contains;height: auto;"> <img src="http://your-image.jpg" style="可见性:隐藏;宽度:100%;“/> < / div >

也许这有帮助，这不是一个确切的背景，但你能理解:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

事实上，当你知道怎么做的时候，这很简单:

<section data-speed='.618' data-type='background' style='background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>

诀窍是将所附的div设置为普通div，其维度值与背景维度值相同(在本例中为100%和40vw)。

如果你在构建时知道图像的比例，想要基于窗口高度的高度，并且你可以针对现代浏览器(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/

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

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

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

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

如果你可以在Photoshop中制作一张图像，其中主图层的不透明度为1左右，基本上是透明的，将img放在div中，然后将真实的图片作为背景图像。然后设置img的不透明度为1，并添加你想要的尺寸。

这张图片就是这样做的，你甚至不能把不可见的图像拖出页面，这很酷。