【问题标题】:Remove gap between images in a flex box [duplicate]删除弹性框中图像之间的间隙[重复]
【发布时间】:2022-01-10 15:04:00
【问题描述】:

[重复]

在这里回答Image inside div has extra space below the image

我在多行中显示一些不同尺寸的图像。 Example here

但行之间存在间隙。我尝试了很多,但找不到原因。

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

【问题讨论】:

  • div.albums有哪些款式?

标签: css vue.js duplicates


【解决方案1】:

我不确定这是否正是你想要的,因为我看不出你是如何设计它们的,但我只是给图像 100% 的高度和宽度,这基本上是在 codepen 中完成的。

CodePen link

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

【讨论】: