Question

我试图按照百分比调整图片的高度，而不是像素。但是，当我使用height: 30%;时，它不起作用，但height: 30px;确实有效。我做错了什么？

我的片段非常简单。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您使用height的百分比值，则父元素需要具有已定义的高度（例如100％），并且这会上升到正文和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>

高度CSS百分比不起作用

3 个答案: