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

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

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

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

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

这招对我很管用:

background-image: url("/assets/image_complete_path");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
height: 100%;

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

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

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

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

我有这个问题，并找到了Hasanavi的答案，但我在宽屏上显示背景图像时遇到了一个小bug -背景图像没有扩散到屏幕的整个宽度。

所以这是我的解决方案-基于Hasanavi的代码，但更好…这应该适用于超宽屏幕和手机屏幕。

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

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    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) */
    }
}

你可能已经注意到了，background-size: contains;属性不适合超宽屏幕，背景尺寸:覆盖;属性不适合移动屏幕，所以我使用这个@media属性来处理屏幕大小并修复这个问题。

另一种可能效率较低的解决方案是将图像包含在设置为visibility: hidden;的img元素下。然后使周围div的背景图像与图像相同。

这将把周围的div设置为img元素中图像的大小，但将其显示为背景。

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>