Eliminieren Sie den Abstand zwischen Bildern innerhalb des Flex-Containers

Question

[wiederholen]

Hier antworten Bilder innerhalb von div haben zusätzlichen Platz unter dem Bild

Ich zeige einige Bilder unterschiedlicher Größe in mehreren Zeilen an. Beispiel hier

Aber es gibt Lücken zwischen den Reihen. Ich habe viel versucht, konnte aber den Grund nicht finden.

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

In Album.vue

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

und CSS:

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

Answer 1

我不确定这是否正是您想要的，因为我看不到您如何设计它们的样式，但我只是给了图像 100% 的高度和宽度，这基本上是在代码笔中完成的。

CodePen 链接

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