Html css中绝对定位的自动高度

我想将图像设置为div中的背景，以便可以更改每个设备的图像分辨率的源。问题是我不想设置div的高度，只想设置100%的宽度，以便与设备窗口的宽度相匹配。因此，我希望高度是根据div的宽度自动生成的

我已经设置了“自动”的高度，但除非我使用值设置高度，否则不会显示div

#图像树{
位置：绝对位置；
z指数：12；
宽度：100%；
高度：自动；
底部：0；
溢出：隐藏；
背景：url（images/trees.png）；
背景重复：无重复；
}

当您给出

位置：绝对值

时，

高度

和

宽度

最初未设置。您需要使用CSS手动设置它们。在你的例子中，既然你已经把背景作为一个图像，绝对定位，为什么你要把它设置为背景图像

您可以将图像放置在

标记本身中，然后使用与图像成比例的正常

宽度

s和

高度

s进行渲染！通过在

absolute

ly定位容器中添加图像来更改代码

---

如果您事先知道图像的宽度和高度之间的比率，则可以使用成比例的

填充底部

例如，如果您的图像是
300x180
，则可以使用此css

<div id="imagetree">
    <img src="images/trees.png" />
</div>

示例：
您可以添加一个JSFIDLE吗？如果我们看不到发生了什么，这很难理解。我之所以使用背景图像，是因为源将根据css查询（即桌面、平板电脑、手机）进行更改。@AlKush所有图像的大小都相同吗？因为你的问题是“不能”，所以答案就过时了。不，它们有不同的分辨率或大小，这就是我使用背景图像的原因。我很抱歉拼写错误。太好了！但填充底部的作用是什么呢？我很困惑。你需要使用它，以确保正确的图像比例得到保留。当然，我设置的值是根据我使用的特定图像大小选择的。你的可能不同。
#imagetree {
   position:absolute; 
   z-index:1; 
   bottom:0;
   overflow: hidden;
   background: url(http://dummyimage.com/300x180/000000/fff.jpg);
   background-repeat: no-repeat;

   width: 100%;            /* use 100% of width */
   padding-bottom: 60%;    /* 180px is 60% of 300px */
   background-size: cover; /* cover the div entirely with the background */
}