[Unique]
Find the Solution Image inside div has extra space below the image
My design showcases various images of different sizes in multiple rows. See an example here.
Despite my efforts, there are noticeable gaps between the rows that I can't seem to resolve.
<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 the Album.vue file:
<img :src="img" :width="width" :height="width" alt=""/>
The CSS styling utilized is as follows:
.muralBox {
margin: auto;
max-width: 400px;
min-width: 400px;
}
.wrapper {
background: #1f1c2c;
display: flex;
flex-wrap: wrap;
}