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

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

有一种非常酷的方法可以让背景图像像img元素一样工作，这样它就可以自动调整它的高度。你需要知道图像的宽高比。将容器的高度设置为0，并根据图像比例将填充顶部设置为百分比。

它看起来如下所示:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

你得到了一个具有自动高度的背景图像，这就像一个img元素一样。这是一个工作原型(你可以调整大小并检查div高度):http://jsfiddle.net/8m9ur5qj/

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

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

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

height: calc(0.664 * 100vw);

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

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

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

你可以在服务器端做:通过测量图像，然后设置div大小，或者用JS加载图像，读取它的属性，然后设置div大小。

这里有一个想法，把同样的图像在div作为IMG标签，但给它可见性:隐藏+发挥位置相对+给这个div的图像作为背景。

我敢肯定这东西在这里永远不会被看到。但如果你的问题和我一样，这就是我的解决方案

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

我想在图像的中心有一个div，这将允许我这样做。