微信小程序图片自适应宽高比例显示解决方法

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

解决方案一：写固定宽度，然后使用 image 组件中 mode 属性的 widthFix ；

先看效果图：

实现代码：

 <image class='my_img' mode='widthFix' src='{{img}}'></image>

.my_img {
  width: 300rpx;
}

image：

解决方案二：利用bindload方法获取图片的宽高，然后获得它的宽高比例

<image  bindload="imageLoad" src='{{img}}'></image>

  imgLoad: function (e) {
    var width = e.detail.width,//图片宽度
      height = e.detail.height,
    this.setData({
      img_ratio: width / height,//图片宽高比例
    })
  },