小程序图片比例展示

获取屏幕宽高

wx.getSystemInfo({
  success: function (res) {
    // 获取可使用窗口宽度
    let clientHeight = res.windowHeight;
    // 获取可使用窗口高度
    let clientWidth = res.windowWidth;
    // 算出比例
    let ratio = 750 / clientWidth;
    // 算出高度(单位rpx)
    let height = clientHeight * ratio;
    // 设置高度
    that.setData({
      height: height
    });
  }
});

图片原比例展示

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