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>
寫(xiě)入方法bindload=“imageLoad”,該方法為每一個(gè)圖片自動(dòng)添加當(dāng)前圖片的實(shí)際高度:文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-858333.html
imageLoad: function (e) {//獲取圖片真實(shí)寬度
console.log(e);
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//寬高比
ratio = imgwidth / imgheight;
//計(jì)算的高度值
var viewHeight = 750 / ratio;
// var imgHeight = this.data.imgHeight;
//把每一張圖片的對(duì)應(yīng)的高度記錄到數(shù)組里
// imgHeight[e.target.dataset.id] = viewHeight;
this.setData({
switerimgHeight: viewHeight
})
},
加image屬性 mode=“widthFix”,使圖片高度自適應(yīng);文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-858333.html
到了這里,關(guān)于【微信小程序】圖片自適應(yīng)(高度、寬度自適應(yīng))的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!