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% 的宽度，高度必须具有自动高度。我试过了 height:auto。但这当然没有帮助。它有助于特定高度，但随后图像缩放错误。

有什么建议么？

Answer 1

试试这个

使用 height:100vh并删除100%;

http://jsfiddle.net/r4y6D/1/

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

Answer 2

只需对您的图像 css 进行一些小改动，如下所示：

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

演示

Answer 3

CSS

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

HTML

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

我在你的 coe 中有height:100%更改。height:auto它现在应该可以工作了。

Answer 4

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

http://jsfiddle.net/Nkcsr/1/

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