【微信小程序】图片自适应屏幕

微信小程序媒体组件image：支持JPG、PNG、GIF、SVG、WEBP等格式。由于手机种类繁多，同一张图片在不同的手机上展示的宽高有时会出现压缩或拉伸的情况。虽然image组件，提供了mode属性适应图片展示的处理，但效果并不尽如人意。

mode 的合法值

值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

尽管image组件提供了不少的mode类型，但是并不能更好的适应屏幕变化而去动态修改图片的尺寸，而只是通过"牺牲"某部分内容来达到展示的效果。

通过分析image组件可知，官方提供了bindload属性。此方法是在图片加载完毕时触发，并携带e.detail={height, width}，即此时就可得到图片的宽高值。由此，可以通过图片的宽高与手机屏幕的宽高成比例换算，最终就能把理想的比例缩放图片的大小了。

调用示例代码：

  <image src="../../static/banner.jpg" bindload="autoImage" style="width:{{imageWidth}};height:{{ imageHeight }}" />

实现示例代码：

  autoImage : function(e) {
    var that = this;
    var  originalWidth  = e.detail.width;
    var originalHeight = e.detail.height;
    var imageWidth = 0;
    var imageHeight = 0;
    wx.getSystemInfo({
      complete: (res) => {
        var winWidth = res.windowWidth;
        if (originalWidth > winWidth) {
          var autoWidth = winWidth;
          var autoHeight = (autoWidth * originalHeight) / originalWidth;
          imageWidth = autoWidth + 'px';
         imageHeight = autoHeight + 'px';
        } else {
          imageWidth = originalWidth + 'px';
          imageHeight = originalHeight + 'px';
        }
        that.setData({
          imageWidth: imageWidth,
          imageHeight: imageHeight
        });
      }
    })
  }