css - 图像 100% 的 div 的自动高度

Question

我有以下布局:

CSS

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

HTML

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

我的问题是我需要图像宽度为 100%(这实际上有效)，但由于 100% 宽度，高度必须具有自动高度。我试过高度:自动。但这当然没有帮助。它有助于特定高度，但随后图像缩放错误。

有什么建议吗？

Answer 1

只需对您的图片 CSS 做一个小改动，如下所示:

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

Demo