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

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

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

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

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

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

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

这个答案与其他答案相似，但对于大多数应用程序来说是最好的。你需要事先知道你通常做的图像大小。这将允许您添加叠加文本，标题等，没有负填充或绝对定位的图像。关键是设置填充%以匹配图像纵横比，如下面的例子所示。我使用了这个答案，本质上只是添加了一个图像背景。

.wrapper { width: 100%; /* whatever width you want */ display: inline-block; position: relative; background-size: contain; background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat; margin: 0 auto; } .wrapper:after { padding-top: 75%; /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */ display: block; content: ''; } .main { position: absolute; top: 0; bottom: 0; right: 0; left: 0; color: black; text-align: center; margin-top: 5%; } <div class="wrapper"> <div class="main"> This is where your overlay content goes, titles, text, buttons, etc. </div> </div>

有一个纯CSS的解决方案，其他的答案错过了。

“content:”属性主要用于在元素中插入文本内容，但也可以用于插入图像内容。

.my-div:before {
    content: url("image.png");
}

这将导致div将其高度调整为图像的实际像素大小。要调整宽度，添加:

.my-div {
    display: inline-block;
}