1. 程式人生 > >微信小程式圖片拼接的時候底部留白的問題解決

微信小程式圖片拼接的時候底部留白的問題解決

原文連結:傳送門

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