H5图片高度根据宽度自适应

每个图片原始宽高不一样，缩小每个图片到指定的宽度，高度等比例缩小，实现图片高度自适应。

下面看看实现代码：

下面是uniapp的条件编译，如果是小程序场景就使用 mode 属性实现高度自适应，如果是H5场景，就通过图片 的 load 获取图片的宽高，然后通过计算出缩小后的宽高动态渲染到页面

<block v-for="(item,index) in awardsList" :key="index">

    <!--  #ifdef  MP -->
    <image mode="widthFix" :id="index" :src='item.img' class="canvas-item-img"></image>
    <!--  #endif -->

    <!--  #ifdef  H5 -->						
    <image @load="dialImgLoad" :id="index" :src='item.img' :style="{width:item.img_width,height:item.img_height}">                    
    </image>
    <!--  #endif -->

<block>

js代码：this.$forceUpdate() 是强制更新视图，因为页面加载的时候，图片设置宽高时是没有 img_width的。

80是需要设置的图片高度，图片的高度根据这个值等比缩小

methods: {
	dialImgLoad(e){
		let idx = e.currentTarget.id;
		let num = e.detail.width/80;
		this.awardsList[idx].img_width = 80+'rpx'
		this.awardsList[idx].img_height = (e.detail.height/num).toFixed(2)+'rpx'
		this.$forceUpdate()
	}
}

css代码：设置一个默认宽度，这里仅小程序会生效，H5会被 style 属性覆盖。

.canvas-item-img {
	width: 80rpx;
}