消除彈性容器內影像之間的間距
P粉921130067
P粉921130067 2024-03-27 12:23:19
0
1
346

[重複]

在這裡回答 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;
}

P粉921130067
P粉921130067

全部回覆(1)
P粉451614834

我不確定這是否正是您想要的,因為我看不到您如何設計它們的樣式,但我只是給了圖像100% 的高度和寬度,這基本上是在代碼筆中完成的。

CodePen 連結

.albums img{
      height: 100%;
      width: 100%;
     }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板