图片缩放JavaScript原生实现

 function  scalImg(aLi){
        for(var i=0,l=aLi.length;i<l;i++){
            var oImg = new Image(),
                oLi = aLi[i],
                imgEle = oLi.children[0];

            oLi.style.width = winW+'px';
            oImg.src = imgEle.src;
            imgEle.style.width = 'auto';
            imgEle.style.height = 'auto';

            /*初始化图片尺寸，相对屏幕水平垂直居中处理;以最大边为基准等比例缩放*/
            (function(img){
                oImg.onload = function(){
                    var imgW = this.width,
                        imgH =  this.height,
                        rate = imgW/imgH,
                        winRate = winW/winH,
                        w = 0,
                        h = 0;

                    if(rate>1){    /*图片宽度大于图片高度*/
                        w=Math.min(imgW,winW);
                        h = w/rate;
                        if(h>winH){  /*缩放后高度大于屏幕高度*/
                            img.style.height = winH +'px';
                        }else{
                            img.style.width = w+'px';
                        }
                    }else{
                        h = Math.min(imgH,winH);
                        w = h*rate;
                        if(w>winW){  /*缩放后宽度大于屏幕宽度*/
                            img.style.width = winW +'px';
                        }else{
                            img.style.height = h+'px';
                        }
                    }
                }
            })(imgEle);
        }
    }

缩放比例的大致方法是

1、new一个img对象，

2、添加img src属性

3、在img的load函数中判断其宽高比例;

判断：若宽度大于高度 此时选择 一个图片宽度；从页面宽度和图片本身宽度中选择较小的宽度作为图片计算宽度;

然后根据比例算出图片高度,

此时又得判断若图片高度大于页面高度，图片最终按照高度缩放，高度等于页面高度;

反之按照图片宽度缩放页面;

若宽度小于高度;

在图片高度和页面高度间选择一个一个较小的值作为计算高度，按比例计算出图片宽度。

若图片宽度大于页面宽度，图片按宽度缩放，宽度等于页面宽度;

反之图片按高度缩放，高度等于计算高度；