在開發網頁的時候少不了圖片，展示圖片時自然會遇到縮放問題。一般情況下只要我們的圖片寬高比例差不多時，縮放是沒有問題的，展示不太影響美觀。但是有一些網頁對這個要求比較高，要求圖片不能變形，縮放一定按比較展示，還不能影響網頁整個佈局。
網上給到一些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 };
            }
        }
 

https://www.51220.cn 51220網站目錄

（3）給圖片賦值寬和高。

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

這種方法經過測試可行，還未發現不相容情況，可根據自己的情況調整程式碼。以上是主要程式碼，需要說明的是圖片外的容器一定有要個寬度或高度不然都不限了就沒有必要使用了，可同時有寬度和高度，也可以有其中一個，另一個不限時可設定成一個大值即可。