一.對於微信小程式頁面中的圖片，官方提供了image元件進行支援。根據官方文件，image元件用法如下：

例：圖片水平、垂直居中佈局程式碼如下：

<view style="width:750rpx;height:750rpx;background-color:#000;">
	<image id="img" src="www.xxoo.com/a.jpg" mode="aspectFit" style="width:100%;height:100%;"></image>
</view>

注1：如不瞭解rpx，請檢視開發文件
注2：image元件的mode屬性值為aspectFile:保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。

1.自此上述程式碼實現了圖片的水平垂直居中效果圖如下：

                          
2.有時我們想獲取不同裝置中已被水平、垂直劇中後圖片的實際寬高，最初的想法是使用wx.createSelectorQuery()標籤獲取image元件的寬高，程式碼如下:

wx.createSelectorQuery().select('#img').boundingClientRect(function(rects){
	var width = rects.width;
	var height = rects.height;
	console.log('width:' + width + ';' + 'height:' + height);
}).exec();
 

3.經測試在iphone6下得到width:375px;height:375px;

在iphone6 Plus下得到width:414px;height:414px;

     由此我們知道獲取到的是我們設定的image元件的實際寬高，而不是圖片的實際寬高。這個想法失敗了，沒有現成API的支援只好想辦法自己實現了。

二.在後臺能夠給出圖片原始寬高的情況下，經過自己考慮及實際驗證，（以image元件width:750rpx;height:750rpx;為例），由於image元件的寬高相同，因此圖片原圖，實際寬/高中較長的那個會充滿image元件的寬/高的100%;並以此為比例，對圖片進行等比縮放，已使圖片在image中水平、垂直居中.

舉個栗子：已知圖片原始寬度w：200px;原始高度h：400px；高度(400px)>寬度(200px),因此高度會優先佔據image元件高度的100%即750rpx;據此我們可以算出圖片在裝置上的實際寬width,高height。

(1)獲取螢幕寬度：

var screenWidth = wx.getSystemInfoSync().screenWidth;

(2)獲取圖片原始寬高比：

var ratio1 = w / h;

(3)算出相對rpx單位與絕對px單位之間的轉換比例：

ratio2 = screenWidth / 750;

(4)計算出縮放後圖片絕對px高度：

height = 750 * ratio2;

(5)由於圖片縮放為等比縮放，因此原始圖片寬高比恆等於縮放後的圖片寬高比得到：

ratio1 = width / height;
//由此得出：
width = ratio1 * height;