消除弹性容器内图像之间的间距

Question

[重复]

在这里回答 div 内的图像在图像下方有额外的空间

我沿多行显示一些不同尺寸的图像。 此处示例

但是行之间有间隙。我尝试了很多，但找不到原因。

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

在Album.vue中

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

和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%;
     }