微信小程序图片高度按照图片真实宽高比自适应

原理：image组件bindload属性

前端在按照设计图定的宽度做好图片的宽高之后，如果图片的原始宽高比对应不上，那么图片就会出现拉伸变形的情况，虽然微信小程序有mode属性可以对图片进行适应，但是会有部分显示不完全或者会有留白，而且如果不给image组件设置高度或者设置为auto时，图片的宽度为0。

后来我发现了image组件的bindload属性

我发现event.detail 里给出的宽和高是图片的原始宽高，那么我们就可以根据这个宽高得出图片的宽高比，在宽度一定时就可以做到高度自适应而不会拉伸变形或者留白。

js

data:{
	poster:{
	          src: '',//这里放图片路径
          width: '',//图片加载完成才会有，先置为空
          height: ''
		}
},
  imgLoad(e) {
    // console.log(e)
    let width = parseInt(e.detail.width);
    let height = parseInt(e.detail.height);

    this.setData({
      'poster.width': width,
      'poster.height': height,
    })
  },

wxml

高度设置为""时，会取wxss中设置的高度，没有就会取默认高度240px,不可以设置为auto，高度不会自适应，会是0。

wxss

.poster{
  width: 750rpx;
  height: 350rpx;
}