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

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

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

正文：

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

先看效果图：

实现代码：

.my_img {
  width: 300rpx;
}

 

image：

mode

String

'scaleToFill'

图片裁剪、缩放的模式

缩放

widthFix

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

 

 

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

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