微信小程式圖片拼接的時候底部留白的問題解決
原文連結:傳送門
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;
}