小程序中的图片自适应

1、使用mode：widthFix

   widthFix：宽度不变，高度自动变化，保持原图宽高比不变。
   首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。
   这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位

2、使用bindload绑定函数动态自适应。

   我们先给image绑定一个函数，这个函数，使用bindload绑定函数动态自适应，我们可以获取到原图的宽度和高度。
   然后计算他们的宽高比。然后设置一个宽度大小（rpx），最后通过style动态设置image的宽高。

 <image src="../uploads/2.jpg" bindload="imageLoad"  style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>
    var app = getApp()  
    Page({  
     data: {  
        screenWidth: 0,  
        screenHeight:0,  
        imgwidth:0,  
        imgheight:0,  
     },  
     onLoad: function() {  
         var _this = this;  
         wx.getSystemInfo({  
            success: function(res) {  
                _this.setData({  
                    screenHeight: res.windowHeight,  
                    screenWidth: res.windowWidth,  
                });  
            }  
         });  
  
     },  
     imageLoad: function(e) {  
        var _this=this;  
        var $width=e.detail.width,    //获取图片真实宽度  
            $height=e.detail.height,  //获取图片真实高度
            ratio=$width/$height;   //图片的真实宽高比例  
        var viewWidth=500,           //设置图片显示宽度，  
            viewHeight=500/ratio;    //计算的高度值     
        this.setData({  
            imgwidth:viewWidth,  
            imgheight:viewHeight  
        })  
     }