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

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
      })
  }
})

猜你喜欢

转载自blog.csdn.net/weixin_43292447/article/details/85250151