jquery: 计算图片大小，按比例缩放

比较图片宽高是否超出父元素的宽高，没有超过直接设置图片本身宽高，超过的话，计算比率父元素宽或高比图片的宽或高，乘以图片宽或高

function resizeImage(imgElement, maxWidth, maxHeight) {
    let ratio = 0;
    let width = imgElement.width();
    let height = imgElement.height();
    if (width > maxWidth) {
        ratio = maxWidth / width;
        imgElement.css({
            width: maxWidth,
            height: ratio * height
        });
    }
    if (height > maxHeight) {
        ratio = maxHeight / height;
        imgElement.css({
            width: ratio * width,
            height: maxHeight
        });
    }
}

 优化：

function resizeImage(imgElement, maxWidth, maxHeight) {
    imgElement.on('load', function () {
        let ratio = 0;
        let width = imgElement.width();
        let height = imgElement.height();
        if (width > maxWidth) {
            ratio = maxWidth / width;
            imgElement.css({
                width: maxWidth,
                height: ratio * height
            });
        }
        if (height > maxHeight) {
            ratio = maxHeight / height;
            imgElement.css({
                width: ratio * width,
                height: maxHeight
            });
        }
    });
}

 考虑图片缓存以及重新加载：

function resizeImage(imgElement, maxWidth, maxHeight) {
    let ratio = 0;
    let imgSrc = imgElement.attr('src');
    getImageRealSize(imgSrc, function (width, height) {
        if (width > maxWidth) {
            ratio = maxWidth / width;
            imgElement.css({
                width: maxWidth,
                height: ratio * height
            });
        }
        if (height > maxHeight) {
            ratio = maxHeight / height;
            imgElement.css({
                width: ratio * width,
                height: maxHeight
            });
        }
    })
}

function getImageRealSize(imgSrc, callback) {
    let img = new Image();
    img.src = imgSrc;
    //如果图片被缓存则取缓存图片，否则待图片加载完毕在获取
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
        };
    }
}

 优化方案二：

function resizeImage(imgElement, maxWidth, maxHeight) {
    let ratio = maxWidth / maxHeight;
    let imgSrc = imgElement.attr('src');
    getImageRealSize(imgSrc, function (width, height) {
        let imgRatio = width / height;
        if (ratio > imgRatio) { //显示的宽度较大
            imgElement.css({
                width: width * (maxHeight / height), //宽度乘以高度比率
                height: maxHeight
            });
        } else { //显示的高度大
            imgElement.css({
                width: maxWidth,
                height: height * (maxWidth / width)
            });
        }
    });
}

function getImageRealSize(imgSrc, callback) {
    let img = new Image();
    img.src = imgSrc;
    //如果图片被缓存则取缓存图片，否则待图片加载完毕在获取
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
        };
    }
}