html - 高度 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%)，并且该高度会上升到正文和 html，因此首先您可以从添加开始

html, body { height: 100%; }

并且还为 body 和图像之间的所有元素提供高度定义。