具有图像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

Jus对您的图像CSS进行了如下小改动：

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

Demo

Answer 2

尝试一下

使用高度：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 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>

我在您的笔划中将height:100%更改为height:auto。它现在应该可以工作。

Answer 4

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

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

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