高度CSS百分比不工作

我試圖調整百分比，而不是像素的圖片的高度。但是，當我使用height: 30%;它不起作用，但height: 30px;確實工作。我究竟做錯了什麼？高度CSS百分比不工作

我的代碼片段讓人頭腦簡單。

.imagebanner { 
 
    height: 30%; 
 
    width: 100%; 
 
}

<img src="http://localhost/wordpress/wp-content/uploads/2016/11/Welding-banner.jpg" alt="welding-banner" class="imagebanner" />

來源

2016-11-12 Thomas Hutton

嘗試'高度：30vh'（VH）=（視高度） –

@RienNeVaPlu͢s還是什麼都沒有，可悲。 –

更新您的瀏覽器，然後嘗試。有時候如果你使用舊的瀏覽器。 HTML的新功能在舊瀏覽器中不起作用。

來源

2016-11-12 16:00:00

它不是瀏覽器問題，不是瀏覽器。 –

如果您使用height的百分比值，父元素需要有一個定義的高度（例如100％），而這種上升的身體和HTML，所以作爲開始，你可以添加

開始

html, body { height: 100%; }

並且還給所有元素的高度定義在body和您的圖像之間。

來源

2016-11-12 16:02:52 Johannes

您需要在父元素上設置100％的高度。

.imagebanner { 
 
    height: 30%; 
 
    width: 100%; 
 
    background: red; 
 
} 
 

 
.wrapper { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: grey; 
 
}

<div class="wrapper"> 
 
<img src="http://christiancomputerrepair.com/wp-content/themes/christiancomputerrepair/images/home_computer.png" class="imagebanner"> 
 
</div>

來源

2016-11-12 16:03:58 James

高度CSS百分比不工作

回答

相關問題