微信小程序图片有间隙

一、原本有间隙

1.wxml

<view class="picture" wx:for="{{product}}">
      <image class="img" src="{{item}}" mode="widthFix"></image>
</view>

2.wxss

.img{
  width: 100%;
}

3.原图

 

 二、修改后（两种都可以）

1.wxss

①、

.picture image {
  width: 100%;
  min-height: 500rpx;
}

.img {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

②、

.picture image {
  width: 100%;
  min-height: 500rpx;
  margin-top: -12rpx;
}

.img {
  position: relative;
}

 

2.修改后的图片