微信小程序图片拼接的时候底部留白的问题解决

原文链接：传送门

1.给图片包裹元素加属性
position: relative;                                                                        //用弹性盒子让图片垂直排列
display: flex;
flex-direction: column;

2.给图片本身加属性
1）vertical-align:top;  或者  vertical-align:bottom;                         //垂直对齐方式

2）margin-top: -10rpx;     (先不建议这种方法哈，不够科学)               //负margin值

代码示例(微信小程序)：
wxml代码

<view class='big_tu'>
<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_01.png' style='width:100%;'></image>
<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_02.png' style='width:100%;'></image>
<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_03.png' style='width:100%;'></image>
<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_04.png' style='width:100%;'></image>
</view>

wxss代码
.big_tu{
width: 100%;
margin-bottom: 120rpx;
/* position: relative;
display: flex;
flex-direction: column; */
}

.big_tu image{
background: lightblue;
/* margin-top: -10rpx; */
aligvertican:top;
}