微信小程序单张图片自适应

index.wxml页面结构

<image src="/image/add_act.png" bindload="imageLoad" data-index="{{ index }}" style="width:{{ images[index].width }}px; height:{{ images[index].height }}px;"></image>

index.js

Page({
  data:{
    images:{},
    index: 0
  },

imageLoad: function(e) {

     var $width=e.detail.width,    //获取图片真实宽度
         $height=e.detail.height;
     var ratio=$width/$height;    //图片的真实宽高比例
     var maxW,maxH, maxRatio; //图片显示区域最大宽度（屏幕宽度－30两边距）、最大高度（屏幕高度的一半）、宽高比例
         wx.getSystemInfo({
           success: function (res) {
             maxW = res.windowWidth-30;
             maxH = res.windowHeight/2;
             maxRatio = maxW/maxH;
           }
         });

      var image = this.data.images;

         //不超出显示区域，原图大小显示
         if ($width <= maxW && $height <=maxH){
           image[e.target.dataset.index] = {
             width: $width,
             height: $height
           }
         } else if (ratio >= maxRatio && $width >= maxW){  //超出显示区域，原图宽高比例大（图片比较宽）
           image[e.target.dataset.index] = {
             width: maxW,
             height: maxW/ratio
           }
         } else if (ratio < maxRatio && $height >= maxH){//超出显示区域，原图宽高比例小（图片比较高）
           image[e.target.dataset.index] = {
             width: maxH*ratio,
             height: maxH
           }
         }

      //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
      this.setData({
           images:image
      })
  }

}