我用jQuery解决了这个问题。直到新的CSS规则允许这种类型的行为，我发现这是最好的方法。

设置你的divs

下面是你想要显示背景的div(“hero”)，然后是你想要覆盖在背景图像上方的内部内容/文本(“inner”)。你可以(也应该)将内联样式移动到英雄类中。我把它们留在这里，这样就可以快速和容易地看到应用到它的样式。

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

计算图像纵横比

接下来，通过将图像的高度除以宽度来计算图像的纵横比。例如，如果你的图像高度是660，宽度是1280，那么长宽比就是0.5156。

设置一个jQuery窗口大小调整事件来调整高度

最后，添加一个jQuery事件监听器来调整窗口大小，然后根据纵横比计算英雄div的高度并更新它。这种解决方案通常会在底部留下一个额外的像素，因为使用纵横比的计算不完美，所以我们在结果大小中添加一个-1。

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

确保它在页面加载时工作

您应该在页面加载时执行上面的resize调用，以便在一开始就计算出图像的大小。如果你不这样做，那么英雄div将不会调整，直到你调整窗口的大小。我设置了一个单独的函数来进行大小调整。下面是我使用的完整代码。

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

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

<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)。

我能想到的最好的解决办法是用百分比来指定你的宽度和高度。这将允许您根据显示器大小调整屏幕大小。它更响应式的布局。

举个例子。 你有

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

这是最好的选择，如果你想要一个响应式布局，我不建议浮动，在某些情况下浮动是可以使用的。但在大多数情况下，我们避免使用float，因为当你进行跨浏览器测试时，它会影响很多事情。

希望这对你有所帮助。

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

享受吧!

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

我看了一些解决方案，它们都很棒，但我觉得我找到了一个非常简单的方法。

首先，我们需要从背景图像中获取比例。我们简单地将一个维度划分为另一个维度。然后是66.4%

当我们有图像比率时，我们可以简单地计算div的高度，将比率乘以视口宽度:

height: calc(0.664 * 100vw);

对我来说，它工作，正确设置div高度，并在窗口调整大小时更改它。

假设你有这样的东西:

<div class="content">
    ... // inner HTML
</div>

你想给它添加一个背景，但你不知道图像的尺寸。

我也遇到过类似的问题，我用网格解决了它:

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z索引是用来放置背景图像的，你当然可以放置img。div.content上面的背景。

注意:这可能会导致div.content具有与图片相同的高度，所以如果div.content有任何根据其高度放置的子元素，你可能想要设置一个数字，而不是像'auto'这样的东西。