圖片顯示是小程序設(shè)計必須要經(jīng)過的步驟,本人看到網(wǎng)上教學(xué)有限,現(xiàn)整理出自己設(shè)計過程中出現(xiàn)的問題,應(yīng)該可以解決你遇到的問題。
用最后給的完整代碼,按照我的步驟一定能調(diào)試出來,不行再聯(lián)系我。
先給用到的代碼以及效果圖:
先給home.wxml程序:
<view class='imagesize'> <image src="/images/2.png" class='in-image' > </image> </view>
1.圖片居中(屏幕頂部):
//.wxss里的參數(shù) .imagesize{ display:flex; //flex布局 justify-content: center; //水平軸線居中 } .imagesize image { width:400rpx; height:400rpx; }
上面設(shè)置的圖片尺寸,僅僅是為了方便看到實際的效果。
2.圖片居中(中部,位置可調(diào) →height 和 align-items)
.imagesize{ display:flex; height: 600px; //flex布局高度 justify-content: center; align-items:center; //垂直居中 } .imagesize image { width:400rpx; height:400rpx; }
上圖的height值分別為: 200px 400px 600px
前兩種都不適用全部型號手機,因為手機屏幕尺寸不固定。
但是,對于設(shè)計圖片位置很有幫助。
3.圖片居中(屏幕正中間)
代碼:
page{ height:100% //滿屏設(shè)置 } .imagesize{ display:flex; height: 100%; //設(shè)置布局滿屏 justify-content: center; align-items:center; } .imagesize image { width:400rpx; height:400rpx; }
看效果:
4.給出完整代碼(之前的一篇也有完整代碼,現(xiàn)給出的加到之前的文件夾下就行):
home.wxml
<view class='imagesize'> <image src="/images/2.png" class='in-image' > </image> </view>
home.wxss
page{ height:100% } .imagesize{ display:flex; height: 100%; justify-content: center; align-items:center; } .imagesize image { width:400rpx; height:400rpx; }
5.鋪滿屏幕:
單獨講鋪滿屏幕,主要用到mode='widthFix'
具體加在的程序段是.wxml:
<image src="/images/img21.jpg" class='in-image' mode='widthFix'> </image>
以及.wxss的改變:
page{ height:100% } .imagesize{ display:flex; height: 100%; justify-content: center; align-items:center; }
換了一張圖做演示:
看看不加widthFix的效果圖:
所以還是很有用的。
這里由于是底部tab窗口,所以沒有顯示完整屏幕覆蓋的圖。
可以設(shè)計啟動畫面,當(dāng)然截取合適比例的圖會影響實際顯示效果,還有就是背景顏色與圖片顏色的不同需要你調(diào)試時候注意一下。
推薦教程:《微信小程序》