一、實現原理

1.固定區域

規定圖片顯示區域大小，例如200px * 200px，最終縮放後圖片不會超出該範圍。

2.圖片尺寸

需要獲取到圖片的高度和寬度，（注意：當然圖片未載入完成，無法獲取到圖片的尺寸），再利用固定區域尺寸進行等比縮放。

3.縮放原則

如果圖片的寬度大於固定區域寬度，則將圖片寬度縮放為固定區域寬度，然後根據該比例縮放圖片的高度，如果此時縮放後的高度大於固定區域的高度，那麼再次對圖片的寬度進行縮放；同理，先判斷圖片的高度是否超出固定區域高度...。其實，最根本的原則是圖片寬高縮放比例不變和最終圖片不能超出固定區域範圍。

二、jquery 程式碼實現

1.引入JQuery 類庫

<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script> 

2.實現函式

    // 根據url獲取圖片尺寸並進行等比縮放
        function checkPhoto(url){
            var img = new Image();
            img.src = url;
            var doc_w = $(window).width() * 0.8;   // 螢幕寬度
            var doc_h = $(window).height() * 0.8
 
;  // 螢幕高度
            var img_w;   // 圖片寬度
            var img_h;   // 圖片高度
            if(img.complete){
                img_w = img.width;
                img_h = img.height;
                // 圖片等比縮放
                if (img_w > doc_w) {     //如果圖片寬度大於螢幕寬度的0.8倍
                    var height = (doc_w * img_h) / img_w; //高度等比縮放
 

                    if(height > doc_h){  // 縮放後高度大於螢幕高度0.8倍
                        var width = (doc_w * doc_h) / height;
                        height = doc_h;  //繼續縮放高度
                    }
                    img_w = doc_w;
                    img_h = height;
                }
                if(img_h > doc_h){       //如果圖片高度超出指定最大高度
                    var width = (doc_h * img_w) / img_h; //高度等比縮放
                    if(width > doc_w){
                        doc_h = (doc_w * doc_h) / width;
                        width = doc_w; //高度等比縮放
                    }
                    img_w = width;
                    img_h = doc_h;
                }
                return img_w + "," + img_h;
            }else{
                img.onload = function(){
                    img_w = img.width;
                    img_h = img.height;
                    // 圖片等比縮放
                    if (img_w > doc_w) {     //如果圖片寬度大於螢幕寬度的0.8倍
                        var height = (doc_w * img_h) / img_w; //高度等比縮放
                        if(height > doc_h){  // 縮放後高度大於螢幕高度0.8倍
                            var width = (doc_w * doc_h) / height;
                            height = doc_h;  //繼續縮放高度
                        }
                        img_w = doc_w;
                        img_h = height;
                    }
                    if(img_h > doc_h){       //如果圖片高度超出指定最大高度
                        var width = (doc_h * img_w) / img_h; //高度等比縮放
                        if(width > doc_w){
                            doc_h = (doc_w * doc_h) / width;
                            width = doc_w; //高度等比縮放
                        }
                        img_w = width;
                        img_h = doc_h;
                    }
                    return img_w + "," + img_h;
                    img.onload=null;//避免重複載入
                }
            }
        }