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

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

添加到原来接受的答案只需添加样式宽度: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 >

受到最受欢迎的答案的启发，我最终想出了一个使用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

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

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

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

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

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

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

height: calc(0.664 * 100vw);

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