图片缩放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函数中判断其宽高比例;

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

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

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

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

若宽度小于高度;

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

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

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