小程序图片按照屏幕宽度等比例缩放

 1、现在公共方法js文件里面common.js

const Adapt = function (e) {
  let imageSize = {}
  //获取当前屏幕大小,注意:获取到的是px而非rpx
  wx.getSystemInfo({
    success: function (res) {
      let ratio = res.windowWidth / e.detail.width,
        imgW = res.windowWidth
      if (res.windowWidth > e.detail.width) {
        imgH = e.detail.height / ratio;
      } else {
        imgH = e.detail.height * ratio;
      }
      imageSize = { imageHeight: imgH, imageWidth: imgW }
    }
  })
  return imageSize
}


module.exports = {
    Adapt:Adapt
}

2、使用

wxml

<image data-src="{{item}}" data-index="{{index}}" bindload="dispose" style="width:{{imageSize[index].imageWidth}}px;height:{{imageSize[index].imageHeight}}px;" class="recommend-image" src="{{item}}"></image>

js文件

//引入common方法,路径取决于你的位置
const common = require('../../../utils/common')

data:{
    imageSize:[]
}

dispose(e){
    let that = this,images = common.Adapt(e)
    that.data.imageSize[e.currentTarget.dataset.index]={
      imageWidth: images.imageWidth,
      imageHeight: images.imageHeight
    }
    that.setData({
      imageSize: that.data.imageSize
    })
  },