圖片縮放

小程序的image組件提供了縮放的模式選擇，默認(rèn)的scaletofill就是設(shè)置固定的寬高模式比較少使用，更多的是需要自適應(yīng)寬高的情況。

image.png

slider的寬度固定高度自適應(yīng)

widthfix多適用于通欄，width:100%,高度不同設(shè)備自適應(yīng)的情況。此時(shí)會(huì)按照原圖比列自動(dòng)縮放高度，常用于輪播圖。

image.png

固定大小縮放一邊（保留高或?qū)挘?/h3>

aspectFill多用用在固定大小的范圍內(nèi)顯示，區(qū)別是可以保留一邊，除去通欄外一般用處較多。

image.png

固定大小居中縮放

個(gè)別情況下需要圖片始終居中縮放，多用在用戶(hù)頭像圓環(huán)之類(lèi)，一般留在保留中心內(nèi)容的部分，文檔中暫沒(méi)，需要單獨(dú)設(shè)置。

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