小程序图片自适应写法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_22079371/article/details/83719011

方法一：

在image上加上mode=”widthFix”给定宽度，高度就会相对应等比显示了

方法二：

代码如下：

1、html代码

<image src='{{BaseURL}}/uploadFile/backstage/{{item.PictureFileName}}' bindload="imageLoad" data-index="{{ index }}" style="width:{{ images[index].width-10 }}rpx; height:{{ images[index].height }}rpx;" bindtap='imageDetail' data-url='{{BaseURL}}uploadFile/backstage/{{item.PictureFileName}}'></image>

2、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:viewWidth,
         height:viewHeight
      }
      this.setData({
           images:image
      })
  }
})

实现效果图：