小程序图片自适应缩放设置

图片缩放

小程序的image组件提供了缩放的模式选择，默认的scaletofill就是设置固定的宽高模式比较少使用，更多的是需要自适应宽高的情况。

image.png

slider的宽度固定高度自适应

widthfix多适用于通栏，width:100%,高度不同设备自适应的情况。此时会按照原图比列自动缩放高度，常用于轮播图。

image.png

固定大小缩放一边（保留高或宽）

aspectFill多用用在固定大小的范围内显示，区别是可以保留一边，除去通栏外一般用处较多。

image.png

固定大小居中缩放

个别情况下需要图片始终居中缩放，多用在用户头像圆环之类，一般留在保留中心内容的部分，文档中暂没，需要单独设置。

xx.wxml
<image  catchtouchend="endtap" bindload = "imgLoad"
 style="width:{{ imageWidth }}px;height:{{ imageHeight }}px;margin-left:{{marginLeft}}px;margin-top:{{marginTop}}px" mode="aspectFit" src="{{dataimg}}"></image>

data() {
  return {
   mariginLeft: [],
    mariginTop: [],
    imageWidth: [],
    imageHeight: [],
    screenWidth: 0,
  }
}
xx.js
imgLoad: function (e) {

      var index = e.currentTarget.id;
      //获取图片的原始宽度和高度 
      let originalWidth = e.detail.width;
      let originalHeight = e.detail.height;
      var mariginTopSize = 0;
      var mariginLeftSize = 0;
      let imageSize = imgUtil.imageZoomWidthUtil(originalWidth, originalHeight, 355);
      // 4:3
      mariginLeftSize = -(imageSize.imageWidth - this.data.screenWidth) / 2;
      var mariginLeft = this.data.mariginLeft;
      var imageWidth = this.data.imageWidth;
      var imageHeight = this.data.imageHeight;
      var mariginTop = this.data.mariginTop;
      mariginLeft[index] = mariginLeftSize
      imageWidth[index] = imageSize.imageWidth
      imageHeight[index] = imageSize.imageHeight
      mariginTop[index] = mariginTopSize
      this.setData({
        mariginLeft: mariginLeft,
        mariginTop: mariginTop,
        imageWidth: imageWidth,
        imageHeight: imageHeight,
      });
    },
onload() {
//获取屏幕宽度
wx.getSystemInfo({
      success: function (res) {
        that.setData({
          screenWidth: res.windowWidth
        })
      }
    });
}