微信小程序-图片等比例显示不变形

---

我的个人博客：https://okven.github.io/

---

mode 属性

使用mode属性 属性值设置为widthFix ：宽度不变，高度自动变化，保持原图宽高比不变。

<image class='manImg' mode='widthFix' style="width:100%;" src='{{item.starItem.imageUrl}}' />

bindLoad函数

使用bindload绑定函数动态自适应。 当图片发布完毕时，调用这个函数实现动态自适应

//wxml
<image class='manImg' bindload="imageLoad" style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;" src='{{item.starItem.imageUrl}}' />

//js
imageLoad: function(e) {
    let _this=this;
    let width=e.detail.width,    //获取图片真实宽度
        height=e.detail.height,
        ratio=width/height;   //图片的真实宽高比例
    let viewWidth=500,           //设置图片显示宽度，
        viewHeight=500/ratio;    //计算的高度值
    this.setData({
        imgwidth:viewWidth,
        imgheight:viewHeight
    })
}

推荐第一种：

原因： 第二种实现方式每次图片发布完毕时都会执行一次通信（setData），营销页面渲染效率。
第一种方式的优点在于 当宽度设置百分比100%时，宽度自然会自适应。换一种思路完全可以用外层的view去控制图片