小程序設置保持圖片原有比例

html頁面

 <view wx:for="{{dayItem.images}}">
    <image src='{{item}}' data-index="{{ index }}"  bindload="imageLoad" style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
  </view>

js

  //獲取圖片真實尺寸
Page({
  data: {
    images:{}
  },
  imageLoad: 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,
         height:$height
      }
      this.setData({
           images:image
      })
  }
})