Html 如何使div的高度与图像的高度相匹配，而不给div一个固定的高度？

这是我的html标记：

<div class="main">

<div class="background">

</div>

</div>

---

显然，上面的代码不会在我的.background div上显示任何背景图像。我想要的是，我不想给我的背景div加上高度，也不想在该div上显示背景图像。

重复问题：背景图像是否有一个比率（已知大小）并且它是否应该填充整个宽度。。。背景与内容完全不同，它不会填充任何内容，只会在背景上绘制，在元素上使用背景图像不会创建高度，因此，除非指定高度，或者添加一些在DOM中创建高度的html内容，否则将看不到任何内容。您最好将背景图像作为IMG元素插入，而不是带有背景图像的DIV。

body{margin:0;
padding:0;}

.main{width:100%;
height:auto;}

.background{width:100%;
background:url('../images/bg.jpg') no-repeat 50% 50%;
background-size:cover;
}