在开发网页的时候少不了图片，展示图片时自然会遇到缩放问题。一般情况下只要我们的图片宽高比例差不多时，缩放是没有问题的，展示不太影响美观。但是有一些网页对这个要求比较高，要求图片不能变形，缩放一定按比较展示，还不能影响网页整个布局。
网上给到一些 css方法都试过，均不能实现目的，所以特地使用JS来实现一了一下。以下案例摘自我的企业微信项目。

实现原理：

（1）获取图片的原始高度和宽度。可以通过以下代码实现：

 function getImgNaturalDimensions(oImg, callback) {
            var nWidth, nHeight;
            if (!oImg.naturalWidth) {
                nWidth = oImg.naturalWidth;
                nHeight = oImg.naturalHeight;
                callback(oImg,{ w: nWidth, h: nHeight });
            } else {
                var nImg = new Image();
                nImg.onload = function () {
                    var nWidth = nImg.width,
                        nHeight = nImg.height;
                    callback(oImg,{ w: nWidth, h: nHeight });
                }
                nImg.src = oImg.src;
            }
        }

（2）计算缩放后的宽度和高度，分为以下几种情况:
图片的高和宽都超限了，这时要算一下哪个超的多，按超多的缩放比例等比计算宽和高。
高超限，宽未超限，按高的缩放等比计算。
宽超限，高未超退，按宽的缩放等比计算。
高宽均未超限，返回原始宽和高。

 function scale(maxW, maxH, orgW, orgH) {
            if (orgW < maxW && orgH < maxH) {
                return { w: orgW, h: orgH }
            } else if (orgW > maxW && orgH > maxH) {
                var sw = orgW / maxW, sh = orgH / maxH;
                if (sw > sh) {
                    return { w: maxW, h: maxH / sw };
                } else {
                    return { w: maxW / sh, h: maxH };
                }
            } else if (orgW > maxW) {
                var sw = orgW / maxW;
                return { w: maxW, h: orgH / sw };
            } else {
                var sh = orgH / maxH;
                return { w: orgW/sh, h: maxH };
            }
        }

 

（3）给图片赋值宽和高。

  var resimg = scale(300, 999999, dimensions.w, dimensions.h);
                    image.style.width = resimg.w + 'px';
                    image.style.height = resimg.h + 'px';

这种方法经过测试可行，还未发现不兼容情况，可根据自己的情况调整代码。以上是主要代码，需要说明的是图片外的容器一定有要个宽度或高度不然都不限了就没有必要使用了，可同时有宽度和高度，也可以有其中一个，另一个不限时可设置成一个大值即可。

来自：https://www.lebang2020.cn/details/210124ycbfvuqd.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/10122