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