CSS – Bilder und Divs zeigen ein unterschiedliches Verhalten

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>

Warum dehnt sich das Bild auch bis zum Ende der Flexbox-Breite aus? Sollte es sich nicht nur nach unten erstrecken, wie es das div-Element im Flexbox-Container tut?

Answer 1

您可以控制图片的最大宽度和最大高度，轻松解决您的问题。

只需使用 CSS 将 max-width 和 max-height 添加到图像中，然后在其中添加您自己的值即可。