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

 有问题可以扫码加我微信，有偿解决问题。承接小程序开发。

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

正文：

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

先看效果图：

实现代码：

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

.my_img {
  width: 300rpx;
}

 

image：

mode

String

'scaleToFill'

图片裁剪、缩放的模式

缩放

widthFix

宽度不变，高度自动变化，保持原图宽高比不变

 

 

解决方案二：利用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,//图片宽高比例
    })
  },