为什么图像会调整到父级的宽度，而不是高度？ [复制]

Question

一个图像可以用这个代码适应父级的宽度：

#img-parent {
  max-width: 100px;
}


#header-img {
  width: 100%;
}

<div id="img-parent">
  <img src="https://cdn.pixabay.com/photo/2013/09/16/22/23/yellow-183052_1280.png" id="header-img" alt="">
</div>

但是我设置父容器的高度并不关心：

#img-parent {
  max-height: 100px;
}


#header-img {
  height: 100%;
}

<div id="img-parent">
  <img src="https://cdn.pixabay.com/photo/2013/09/16/22/23/yellow-183052_1280.png" id="header-img" alt="">
</div>

为什么会发生这种情况，如何使图像适应父母的身高？

Answer 1

正如 TylerH 的评论所说，解决方案是定义父级的height，而不仅仅是max-height。