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 添加到图像中，然后在其中添加您自己的值即可。