小程序图片展示的问题

在只有一张图片展示，但是要求根据高度自适应的时候，设置宽度就不合适了。
需求是根据图片展示宽图，长图，方图，尺寸无法确定的时候；
1、可以设置高度固定，宽度自适应，需要设置为背景图片，保持宽高比例；

<view class="bgOnlyPic" bindtap="imgYu" data-list="{{pic}}" data-src="{{pic[0]}}" style="background-image:url('{{pic[0]}}')">
.bgOnlyPic{
    height: 360rpx;
    width: 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

2、第二种方法可以使用小程序image的mode 属性，

widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix   缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
aspectFit   缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 

这四种可以保持原图宽高比不变，并且图片都可以完整的展示出来，具体需要哪种，可以根据实际情况来展示，根据自己需要使用；

二、图片点击放大预览

上面给到的例子bindtap就绑定了预览事件，利用previewImage事件，点击图片的时候，传值当前图片的src（data-src），和需要左右切换查看的img数组（data-list），

//图片点击放大事件
   imgYu(event) {    
     let src = event.currentTarget.dataset.src; //获取data-src
     let imgList = event.currentTarget.dataset.list; //获取data-list
     let arr = [];
     imgList.forEach((e) => {
       arr.push(e);
     });
     //图片预览
     wx.previewImage({
       current: src, // 当前显示图片的http链接
       urls: arr, // 需要预览的图片http链接列表
       success(){
         console.log(arr)
       }
     });
  },

previewImage说明