圖片顯示是小程序設(shè)計(jì)必須要經(jīng)過的步驟，本人看到網(wǎng)上教學(xué)有限，現(xiàn)整理出自己設(shè)計(jì)過程中出現(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è)置的圖片尺寸，僅僅是為了方便看到實(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

前兩種都不適用全部型號(hào)手機(jī)，因?yàn)槭謾C(jī)屏幕尺寸不固定。

但是，對(duì)于設(shè)計(jì)圖片位置很有幫助。

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.鋪滿屏幕：

單獨(dú)講鋪滿屏幕，主要用到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è)計(jì)啟動(dòng)畫面，當(dāng)然截取合適比例的圖會(huì)影響實(shí)際顯示效果，還有就是背景顏色與圖片顏色的不同需要你調(diào)試時(shí)候注意一下。

推薦教程：《微信小程序》