html - CSS div高度继承

Question

为什么情况 2 中的 #container2 不保持 #container1 中指定的高度，就像情况 1 中的宽度一样？

情况一:

<div id="container1" style="width: 300px">
  <div id="container2">
    <img src="landscape.png">
  </div>
</div>

情况二:

<div id="container1" style="height: 300px">
  <div id="container2">
    <img src="portrait.png">
  </div>
</div>

Answer 1

百分比高度仅在父级的 height 已定义时才有效。在您的示例中，#container2 没有那个，它将使用初始值 auto。您可以将其设置为 height:100% 或 height:inherit 以使其等于 #container1 的高度。

#container2 {
  height: 100%; /* or height:inherit; */
}
img {
  max-width: 100%;
  max-height: 100%;
}

<div id="container1" style="height: 300px">
  <div id="container2">
    <img src="//dummyimage.com/800">
  </div>
</div>