微信小程序 圖片等比例 適應屏幕尺寸

index.wxml

<view class="container">
    <view class="matter"> 
        <image wx:for="{{info}}" src="{{item.pic}}" style="width: {{imagewidth}}px; height: {{imageheight}}px;" bindload="imageLoad"></image>
    </view>
</view>

index.js

import util from '../../utils/util.js';
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    imagewidth: 0,//縮放后的寬
    imageheight: 0,//縮放后的高
  },

  imageLoad: function (e) {
    var imageSize = util.imageUtil(e)
    this.setData({
      imagewidth: imageSize.imageWidth,
      imageheight: imageSize.imageHeight
    })
  }
})

until.js

function imageUtil(e) {
  var imageSize = {};
  var originalWidth = e.detail.width;//圖片原始寬
  var originalHeight = e.detail.height;//圖片原始高
  var originalScale = originalHeight/originalWidth;//圖片高寬比
  //獲取屏幕寬高
  wx.getSystemInfo({
      success: function (res) {
          var windowWidth = res.windowWidth;
          var windowHeight = res.windowHeight;
          var windowscale = windowHeight/windowWidth;//屏幕高寬比
          if(originalScale < windowscale){//圖片高寬比小於屏幕高寬比
              //圖片縮放后的寬為屏幕寬
              imageSize.imageWidth = windowWidth;
              imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
          }else{//圖片高寬比大於屏幕高寬比
              //圖片縮放后的高為屏幕高
              imageSize.imageHeight = windowHeight;
              imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
          }
      }
  })
  return imageSize;
}

// 模塊出口
module.exports = {
  imageUtil
};