图像自动高度为100％

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

试试这个

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

Jus对你的图片css进行了一些小改动，如下所示：

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

<强> Demo

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%
}