Css 图像为100%的div的自动高度

我的布局如下：

CSS

HTML

我的问题是，我需要的图像宽度为100%（这实际上是工作）， 但由于100%宽度，高度必须具有自动高度。我试过了

高度：自动

。但这当然没有帮助。它有助于特定高度，但随后图像缩放错误

有什么建议吗？

CSS

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:auto;
position:absolute;
z-index:1;
}

HTML

我已将您的coe中的

height:100%

更改为

height:auto

。它现在应该可以工作了。

试试这个

使用高度：

100vh

并移除

100%

---

JU对您的图像css进行如下小更改：

.top-container img{
    width:100%;
    height:auto !important;
    position:absolute;
    z-index:1;
}

---

不确定高度是否是您要寻找的高度，但请参见下文

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:auto;
position:absolute;
z-index:1;
}

<div class="top-container">
<img src="blahblah" />
</div>

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:100vh;
position:absolute;
z-index:1;   
}

.top-container img{
    width:100%;
    height:auto !important;
    position:absolute;
    z-index:1;
}

.top-container{
width:100%;
border: 1px solid black
}
.top-container img{
width: 100%
}