Hapuskan jarak antara imej dalam bekas fleksibel

Question

[ulang]

Jawab di sini Imej dalam div mempunyai ruang tambahan di bawah imej

Saya memaparkan beberapa imej dengan saiz yang berbeza di sepanjang berbilang baris. Contoh di sini

Tetapi terdapat jurang antara baris. Saya cuba banyak tetapi tidak dapat mencari sebabnya.

<div class="muralBox">
  <div class="wrapper">
    <div v-for="(topAlbum, i) in topAlbumInfo.value" :key="topAlbum.name" class="albums"> 
      <Album :info="topAlbum" :width="layoutConfig[i].width"/>
  </div>
  </div>
</div>

Dalam Album.vue

<img :src="img" :width="width" :height="width" alt=""/>

dan CSS:

.muralBox {
  margin: auto;
  max-width: 400px;
  min-width: 400px;
}
.wrapper {
  background: #1f1c2c;
  display: flex;
  flex-wrap: wrap;
}

Answer 1

Saya tidak pasti sama ada ini betul-betul yang anda mahukan kerana saya tidak dapat melihat cara anda menggayakannya, tetapi saya hanya memberikan imej 100% tinggi dan lebar, yang pada asasnya dilakukan dalam codepen.

Pautan CodePen

.albums img{
      height: 100%;
      width: 100%;
     }