CSS - imej dan div mempamerkan tingkah laku yang berbeza

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>

Mengapa imej juga meregangkan ke hujung lebar kotak flex? Bukankah ia sepatutnya memanjang ke bahagian bawah sahaja, seperti elemen div di dalam bekas Flexbox?

Answer 1

Anda boleh mengawal lebar maksimum dan ketinggian maksimum imej untuk menyelesaikan masalah anda dengan mudah.

Hanya tambahkan max-width 和 max-height pada imej menggunakan CSS dan kemudian tambah nilai anda sendiri di sana.