高度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百分比不工作

回答

相关问题