-1

[Duplicate]

answer here Image inside div has extra space below the image

I display some images with different sizes along multiple rows. Example here

But there are gaps between the rows. I've tried a lot, but couldn't find why.

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

And in Album.vue

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

And css:

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

1 Answers1

1

I'm not sure if this is exactly what you wanted since I can't see how you styled them, but I just gave images 100% height and width and that basically did it in a codepen.

CodePen link

    .albums img{
      height: 100%;
      width: 100%;
     }
sham
  • 71
  • 4