微信小程序 图片等比例 适应屏幕尺寸

index.wxml

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

index.js

import util from '../../utils/util.js';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    image 0,//缩放后的宽
    imageheight: 0,//缩放后的高
  },

  imageLoad: function (e) {
    var imageSize = util.imageUtil(e)
    this.setData({
      image 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
};