图片在父元素中按宽高比例自动缩放

在项目中经常会遇到这种情形：父元素的宽高固定，图片需要在父元素中自适应，然而不清楚图片的尺寸以及宽高比，不能确定是否需要缩放，或者按照宽度还是高度进行缩放。

因此需要分情况讨论：父元素相当于一个图片框，当图片的尺寸小于图片框时，无需进行缩放处理；原图片宽高比大于图片框的宽高比时，按照宽度为标准缩放；原图片宽高比小于图片框宽高比时，按照图片框高度为标准缩放。

以下是在vue项目中使用的相关代码。在js文件夹中的common.js中编写公用方法。

export default {
  /**
   * 
   * @param {object} Img - image 
   * @param {number} maxWidth - the maximum width of the image
   * @param {number} maxHeight - the maximum height of the image
   */
  AutoSize(Img, maxWidth, maxHeight) {
    // Img:要放图片的img元素，onload时传参可用this
    var image = new Image();
    //原图片地址
    image.src = Img.src;
    // 当图片比图片框小时无需处理
    if (image.width < maxWidth && image.height < maxHeight) {
      Img.width = image.width;
      Img.height = image.height;
    }
    else {
      if (maxWidth / maxHeight <= image.width / image.height) {
        //原图片宽高比例大于图片框宽高比例，以宽度为标准缩放
        Img.width = maxWidth; 
        Img.height = maxWidth * (image.height / image.width);
      } else {
        //原图片宽高比例小于图片框宽高比例，以框的高度为标准缩放
        Img.width = maxHeight * (image.width / image.height);
        Img.height = maxHeight; 
      }
    }
  }
};

先在main.js中引入并声明原型。

import commonMethods from 'xxxxxxxx'
Vue.prototype.commonMethods = commonMethods

在其他vue文件中使用时，直接通过this.commonMethods.AutoSize(Img, maxWidth, maxHeight)调用。