微信小程序图片固定宽度，高度自适应处理方法及相关API介绍

微信小程序图片固定宽度，高度自适应处理方法及相关API介绍

1、背景

在我们写js代码时，控制图片固定宽度固定，使得高度自适应缩小，是非常简单的，但在微信小程序中不了解微信小程中组件image相关的属性是有些麻烦的，因为微信小程序中image本身会自带宽度和高度的（尽管可以被覆盖）

而正是这些已存在的值，让我们在不熟悉image属性的情况下，处理很是麻烦。

2、处理方法

在image属性值中有个mode，它有诸多值，其中缩放模式，和裁剪模式，首先我们固定图片的宽度，然后我们要用到缩放模式值：widthFix。并且image具有事件属性:bindload ,该属性可获取当前图片载入完毕后图片的宽高，可将获取到缩放自适应后的高度，赋值给image。

// html
<image class="thumbnail-img" src="{{productDetail.posterImgUrl}}" mode="widthFix" lazy-load="false"
             bindload="imgInfo" style=" height: {{imgHeight}}px;"></image>

//js
 data: {
    imgWidth: "",
    imgHeight: ""
  },
methods: {
	imgInfo(event) {
	      this.setData({
	        imgWidth: event.detail.width,
	        imgHeight: event.detail.height
	      })
	    }
    }

就可实现图片固定宽度，高度自适应

注：