wxml:
`<image class="rich_img" src="{{item}}" bindload="imageLoad" style="height:{{switerimgHeight}}rpx" mode="widthFix" bindtap='previewImg' data-effect_pic='{{richImgLists}}' data-src='{{item}}' id="{{index}}"></image>
写入方法bindload=“imageLoad”,该方法为每一个图片自动添加当前图片的实际高度:文章来源:https://www.toymoban.com/news/detail-858333.html
imageLoad: function (e) {//获取图片真实宽度
console.log(e);
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight;
//计算的高度值
var viewHeight = 750 / ratio;
// var imgHeight = this.data.imgHeight;
//把每一张图片的对应的高度记录到数组里
// imgHeight[e.target.dataset.id] = viewHeight;
this.setData({
switerimgHeight: viewHeight
})
},
加image属性 mode=“widthFix”,使图片高度自适应;文章来源地址https://www.toymoban.com/news/detail-858333.html
到了这里,关于【微信小程序】图片自适应(高度、宽度自适应)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!