微信小程序-图片自适应

image组件

使用使用mode：widthFix，宽度固定，高度自适应

<image class="nav_img" mode="widthFix" src="{{img}}"></image>

注意，在初次进入页面时会有高度拉伸情况，使用样式display:block可解决

(二).使用bindload绑定函数动态自适应。

<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
    })
  }
})