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})}})
如果觉得《微信小程序-图片自适应》对你有帮助，请点赞、收藏，并留下你的观点哦！
