我已经处理这个问题有一段时间了，决定写一个jquery插件来解决这个问题。 这个插件会找到所有带有“show-bg”类的元素(或者你可以传递给它你自己的选择器)，并计算它们的背景图像尺寸。 您所要做的就是包含这段代码，用class="show "标记所需的元素

享受吧!

https://bitbucket.org/tomeralmog/jquery.heightfrombg

我已经处理这个问题有一段时间了，决定写一个jquery插件来解决这个问题。 这个插件会找到所有带有“show-bg”类的元素(或者你可以传递给它你自己的选择器)，并计算它们的背景图像尺寸。 您所要做的就是包含这段代码，用class="show "标记所需的元素

享受吧!

https://bitbucket.org/tomeralmog/jquery.heightfrombg

这可能会有帮助，这不是一个确切的背景，但你明白这个简单的想法吗

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

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

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>

受到最受欢迎的答案的启发，我最终想出了一个使用min-height和“vw”单位的解决方案

我得到了一个比例非常不寻常的图像

通过我最终使用的实验

    min-height: 36vw;

该值必须根据图像的比例变化

CSS代码使用在我的实际页面:

    background:url('your-background-image-adress') center center no-repeat;
    background-size: 100%;
    background-position: top center;
    margin-top: 50px;
    width: 100%;
    min-height: 36vw;

码笔示例https://codepen.io/viniciusrad/pen/GRNPXoL

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

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

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

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

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

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

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

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