web前端等比缩放图片方法

方法一

通过 css 只给图片设置宽度或高度，当页面加载的时，浏览器会自动对图片进行等比缩放。

img {
    width: 100px;
}

或者

img {
    width: 100px;
    height: auto;
}

方法二

通过 Js 实现图片等比缩放。实现公式如下：

公式参数：

• 图片真实宽度：image.width
• 图片真实高度：image.height
• 指定缩放宽度：scaleW
• 指定缩放高度：scaleH

提示： 公式参数中的 image 是通过 new Image() 创建的 Image 对象。使用方式。

公式：

image.width / image.height = scaleW / scaleH

代码实现：

/**
 * 按宽高比例对图片进行等比缩放
 *
 * @param { HTMLCollection } imgObj 需要缩放的图片源对象
 *
 * @param { Number } scaleW 指定缩放的宽
 *
 * @param { Number } scaleH 指定缩放的高
 *
 */

function resizeImage(imgObj, scaleW, scaleH) {
    // 创建 Image 对象。
    const image = new Image();
    //设置原图片 URL，用于获取原图片的真实宽高，即使 <img> 标签设定了宽、高，也不受影响。
    image.src = imgObj.src;

    let tempW; // 存储图片的宽高。
    let tempH;

    // onload 事件确保图片加载完成，否则获取的宽高会为 0
    image.onload = function () {
      // 原图片宽高比例 >= 指定缩放的宽高比例，则说明原图片：宽 >= 高。
      if (image.width / image.height >= scaleW / scaleH) {
        // 用原图片的宽高比例和指定的宽，求实际指定的高。
        if (image.width > scaleW) {
          tempW = scaleW;
          tempH = (image.height * scaleW) / image.width;
        } else {
          // 按原图片的大小进行缩放。
          tempW = image.width;
          tempH = image.height;
        }
      } else {
        // 原图片：高 > 宽
        if (image.height > scaleH) {
          // 用原图片的宽高比例和指定的高，求实际指定的宽。
          tempH = scaleH;
          tempW = (image.width * scaleH) / image.height;
        } else {
          // 按原图片的大小进行缩放。
          tempW = image.width;
          tempH = image.height;
        }
      }
      // 设置图片的宽高
      imgObj.width = tempW;
      imgObj.height = tempH;
    };
}

// 调用
const ele = document.getElementById('img'); // 获取img元素的方法有多种，这里仅是做演示
resizeImage(ele, 400, 340);