CSS - images and divs exhibit different behavior

Question

.d1 {
  border: 1px solid black;
  display: flex;
  width: 300px;
  height: 300px;
}

<div class="d1">
  <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
</div>

Why does the image also stretch to the end of the flexbox width? Shouldn't it only extend towards the bottom, like the div element does inside the Flexbox container?

Answer 1

You can control the maximum width and maximum height of the image to easily solve your problem.

Just use CSS to add max-width and max-height to the image and then add your own values ​​there.