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

原理：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。

<image class="poster" bindload="imgLoad"style="height:{{poster.width?(750/(poster.width/poster.height)):''}}rpx;"src="{{poster.src}}"></image>

wxss

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