图片缩放JavaScript原生实现 

 1  function  scalImg(aLi){
 2         for(var i=0,l=aLi.length;i<l;i++){
 3             var oImg = new Image(),
 4                 oLi = aLi[i],
 5                 imgEle = oLi.children[0];
 6 
 7             oLi.style.width = winW+'px';
 8             oImg.src = imgEle.src;
 9             imgEle.style.width = 'auto';
10             imgEle.style.height = 'auto';
11 
12             /*初始化图片尺寸，相对屏幕水平垂直居中处理;以最大边为基准等比例缩放*/
13             (function(img){
14                 oImg.onload = function(){
15                     var imgW = this.width,
16                         imgH =  this.height,
17                         rate = imgW/imgH,
18                         winRate = winW/winH,
19                         w = 0,
20                         h = 0;
21 
22                     if(rate>1){    /*图片宽度大于图片高度*/
23                         w=Math.min(imgW,winW);
24                         h = w/rate;
25                         if(h>winH){  /*缩放后高度大于屏幕高度*/
26                             img.style.height = winH +'px';
27                         }else{
28                             img.style.width = w+'px';
29                         }
30                     }else{
31                         h = Math.min(imgH,winH);
32                         w = h*rate;
33                         if(w>winW){  /*缩放后宽度大于屏幕宽度*/
34                             img.style.width = winW +'px';
35                         }else{
36                             img.style.height = h+'px';
37                         }
38                     }
39                 }
40             })(imgEle);
41         }
42     }

缩放比例的大致方法是

1、new一个img对象，

2、添加img src属性

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

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

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

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

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

若宽度小于高度;

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

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

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

posted @ 2016-05-18 16:18  挥刀  阅读(597)  评论(0)  编辑  收藏  举报