微信小程序设置图片保持原有比例

微信小程序设置图片保持原有比例

.wxml文件

<block wx:for="{{swiper}}" wx:key="index">   
	<view class="picture_introduction_picture">    
		<image src="{{item.image}}" data-index="{{ index }}"  bindload="realImageLoad" style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"/>   
	</view>  
</block>

.js文件

Page({   
 data: {
     images:{}  
      }, 
	realImageLoad: function(e) {
	    var $width=e.detail.width,    //获取图片真实宽度
	        $height=e.detail.height,   //获取图片真实宽度
	        ratio=$width/$height;    //图片的真实宽高比例
	    //var viewWidth=718,           //设置图片显示宽度，左右留有16rpx边距
	    //viewHeight=718/ratio;    //计算的高度值
	     var image=this.data.images; 
	     //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
	     image[e.target.dataset.index]={
	        width:$width  , //viewWidth
	        height: $height         //viewHeight
	     }
	     this.setData({
	          images:image
	     })
	 }
 })