Why does an image adjust to the width of the parent, but not to the height?

Question

An image can adapt to the width of the parent with this code:

#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>

But it doesn't care if I set the height of the parent container:

#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>

Why does this happen, and how can I make the image adapt to the parent's height?

Set a `height` value for the parent, not just `max-height`. – TylerH Apr 21 '21 at 19:05 — TylerH, Apr 21 '21 at 19:05

dasJulian · Accepted Answer · 2021-07-01T17:18:51.263

-1

As the comment from TylerH said, the solution is to define the height of the parent, not just the max-height.

edited Jul 01 '21 at 17:18

answered Apr 21 '21 at 18:50

dasJulian

1 Answers1