高度CSS百分比不起作用

Question

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

我的片段很簡單。

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

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

Answer 1

如果你使用百分比值作為height ，父元素需要有一個定義的高度（例如100％），這將上升到body和html，所以作為一個開始你可以開始添加

html, body { height: 100%; }

並為 body和圖像之間的所有元素提供高度定義。

Answer 2

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

Answer 3

您需要在父元素上設置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>