Éliminer l'espacement entre les images dans le conteneur flexible

Question

[répéter]

Répondez ici Les images à l'intérieur du div ont un espace supplémentaire sous l'image

J'affiche des images de différentes tailles sur plusieurs lignes. Exemple ici

Mais il y a des espaces entre les rangées. J'ai beaucoup essayé mais je n'ai pas trouvé la raison.

<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>

Dans Album.vue

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

et CSS :

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

Answer 1

Je ne sais pas si c'est exactement ce que vous voulez car je ne vois pas comment vous les stylisez, mais je viens de donner aux images une hauteur et une largeur de 100 %, ce qui se fait essentiellement dans codepen.

Lien CodePen

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