jquery 实现网页端图片等比缩放

一、实现原理

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;//避免重复加载
                }
            }
        }