JavaScript 實現圖片等比縮放

來源 |?https://www.lebang2020.cn/details/210124ycbfvuqd.html

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

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

網上給到一些 css方法都試過，均不能實現目的，所以特地使用js來實現一了一下。以下案例摘自我的企業(yè)微信項目。

實現原理：

（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';

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

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

本文完?