CSS - 圖片和 div 表現出不同的行為

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>

為什麼影像也會拉伸到彈性盒寬度的最末端？難道它不應該只向最底部延伸，就像 div 元素在 Flexbox 容器內所做的那樣嗎？

Answer 1

您可以控制圖片的最大寬度和最大高度，輕鬆解決您的問題。

只需使用 CSS 將 max-width 和 max-height 添加到圖像中，然後在其中添加您自己的值。