自動高度

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

Answer 2

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 3

試試這個

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

不知道，如果高度是你在找什麼，但見下文。

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

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