首頁 > 微信小程式 > 微信開發 > 微信小程式中圖片處理(居中、鋪滿螢幕)

微信小程式中圖片處理(居中、鋪滿螢幕)

hzc
發布: 2020-06-09 16:53:38
轉載
10642 人瀏覽過

圖片顯示是小程式設計必須要經過的步驟,本人看到網路教學有限,現整理出自己設計過程中出現的問題,應該可以解決你遇到的問題。

用最後給的完整程式碼,按照我的步驟一定能調試出來,不行再聯絡我。

先給用到的程式碼以及效果圖:

先給home.wxml程式:

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>
登入後複製

1.圖片居中(螢幕頂端):

//.wxss里的参数
.imagesize{
 display:flex;                    //flex布局
 justify-content: center;         //水平轴线居中
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}
登入後複製

微信小程式中圖片處理(居中、鋪滿螢幕)

上面設定的圖片尺寸,只是為了方便看到實際的效果。

2.圖片居中(中部,位置可調→height 和align-items)

.imagesize{
 display:flex;
 height: 600px;                    //flex布局高度
 justify-content: center;        
 align-items:center;                //垂直居中
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}
登入後複製

微信小程式中圖片處理(居中、鋪滿螢幕)

上圖的height值分別為: 200px                 400px                    

#前兩種都不適用全部型號手機,因為手機螢幕尺寸不固定。

但是,對於設計圖片位置很有幫助。

3.圖片居中(螢幕正中間)

程式碼:

page{
   height:100%                        //满屏设置
}
.imagesize{
 display:flex;
 height: 100%;                        //设置布局满屏
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}
登入後複製

看效果:

微信小程式中圖片處理(居中、鋪滿螢幕)

4.給完整程式碼(之前的一篇也有完整程式碼,現給出的加到之前的資料夾下就行):

home.wxml

#

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </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=&#39;in-image&#39; mode=&#39;widthFix&#39;> </image>
登入後複製

以及.wxss的改變:

page{
height:100%
}
.imagesize{
display:flex;
height: 100%;
justify-content: center;
align-items:center;
}
登入後複製
換了一張圖做示範:

2018071814353890微信小程式中圖片處理(居中、鋪滿螢幕)

看看不加widthFix的效果圖:

微信小程式中圖片處理(居中、鋪滿螢幕)

所以還是很有用的。

這裡由於是底部tab窗口,所以沒有顯示完整螢幕覆蓋的圖。

可以設計啟動畫面,當然截取適當比例的圖會影響實際顯示效果,還有就是背景顏色與圖片顏色的不同需要你調試時候注意一下。

推薦教學:《

微信小程式

以上是微信小程式中圖片處理(居中、鋪滿螢幕)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板