如果说要有一种比较合适的方案，大概是widthFix，然而上面这些模式中，所要求的前提是需要给图片标签设定一个宽度值或者一个高度值。但有时候我们根本不想限定图片的宽高，我们需要的是图片自身能够根据自身的大小来适配。
而widthFix模式就要求你必须先设定一个宽度值，如果出来的图片比给定的width小呢？此时图片则会发生拉伸的现象。
（常见应用在文章中，因为文章中的插图有可能比默认的宽小，比如常见的表情）。
其实上面的标签中，图片为我们预留了一个函数bindLoad。下面看看我是怎么支持自适应的。
有一个前提，就是多图的时候，你需要知道这个图片是处于所有中的位置index，我们通过这个位置来保存图片的宽度和高度。
= viewWidth){
//宽度等于viewWidth,只需要求出高度就能实现自适应
viewHeight = viewWidth/ratio;
}else{
//如果宽度小于初始值，这时就不要缩放了
viewWidth = originWidth;
viewHeight = originHeight;
}
var imageSize = this.data.imageSize;
imageSize[e.target.dataset.index] = {
width:viewWidth,height:viewHeight
}
this.setData({
imageSize:imageSize
})
}
})
如果我们的图片中不仅限定了宽度，还限定了高度值，比如我们限定max-height之类的。那我们的imageLoad函数则要调整为根据他们的宽高比来输出。
=viewRatio){
if(originWidth>=viewWidth){
viewHeight = viewWidth/ratio;
}else{
viewWidth = originWidth;
viewHeight = originHeight
}
}else{
if(originWidth>=viewWidth){
viewWidth = viewRatio*originHeight
}else{
viewWidth = viewRatio*originWidth;
viewHeight = viewRatio*originHeight;
}
}
var image = this.data.imageSize;
image[e.target.dataset.index]={
width:viewWidth,height:viewHeight
}
this.setData({
imageSize:image
})
},
附录：小图预览，进入全屏模式。
用预览图片的API，wx.previewImage(OBJECT)以下是对应的代码，样式部分，自行布局。
html代码：
JS
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
