JavaScript 實作圖檔等比縮放

在開發網頁的時候少不了圖檔，展示圖檔時自然會遇到縮放問題。一般情況下隻要我們的圖檔寬高比例差不多時，縮放是沒有問題的，展示不太影響美觀。

但是有一些網頁對這個要求比較高，要求圖檔不能變形，縮放一定按比較展示，還不能影響網頁整個布局。

網上給到一些 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';      

這種方法經過測試可行，還未發現不相容情況，可根據自己的情況調整代碼。

以上是主要代碼，需要說明的是圖檔外的容器一定有要個寬度或高度不然都不限了就沒有必要使用了，可同時有寬度和高度，也可以有其中一個，另一個不限時可設定成一個大值即可。

本文完〜