圖片顯示是小程序設(shè)計(jì)必須要經(jīng)過的步驟，本人看到網(wǎng)上教學(xué)有限，現(xiàn)整理出自己設(shè)計(jì)過程中出現(xiàn)的問題，應(yīng)該可以解決你遇到的問題。
用最后給的完整代碼，按照我的步驟一定能調(diào)試出來，不行再聯(lián)系我。
先給用到的代碼以及效果圖：
先給home.wxml程序：
imagesize'
> in-image'
> 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.wxmlimagesize'
> in-image'
> home.wxsspage{
height:100% }
.imagesize{
display:flex;
height: 100%;
justify-content: center;
align-items:center;
}
.imagesize image {
width:400rpx;
height:400rpx;
}
5.鋪滿屏幕：
單獨(dú)講鋪滿屏幕，主要用到mode='
widthFix'
具體加在的程序段是.wxml：
in-image'
mode='
widthFix'
> 以及.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í)候注意一下。
推薦教程：
《微信小程序》以上就是微信小程序中圖片處理（居中、鋪滿屏幕）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
CSDN，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
微信公眾號(hào)點(diǎn)亮圖片怎么做
下一篇：
微信小程序知識(shí)點(diǎn)總結(jié)相關(guān)文章相關(guān)視頻為什么微信小程序打開來會(huì)黑屏微信小程序如何開發(fā)一款小游戲？（實(shí)戰(zhàn)教程）微信小程序刮刮卡的實(shí)現(xiàn)微信小程序亮度怎么調(diào)？微信小程序中圖片處理（居中、鋪滿屏幕）初識(shí)微信小程序(1)初識(shí)微信小程序(3)深入了解微信小程序(一) [溫州做微信公眾號(hào)]