小虎博客

A-A+

javascript实现图片等比例缩放代码

2016年01月27日 编程技术 暂无评论

1、预先定义好图片显示的标准宽度和高度。

2、如果图片的大小超过了标准定义，那么等比例压缩图片。

3、如果图片的大小等于标准定义，那么按照标准宽度和高度显示图片。

4、如果图片的大小小于标准定义，那么不对图片进行任何压缩处理。代码如下:

  1. //设置图片自动调整    
  2. function   SetImgSize(pimg,iw,ih)   {   //pimg对象，iw缩略图宽度,ih缩略图高度    
  3.   var   img   =   new   Image();     
  4.   img.src = pimg.src;       
  5.   var   w   =   iw;       
  6.   var   h   =   ih;       
  7.       
  8.  if(img.width>0 && img.height>0)    
  9.   {       
  10.   if(img.width>iw||img.height>ih)    
  11.   {    
  12.     if((iw   /   ih)   >   (img.width   /   img.height))       
  13.     {       
  14.    h =  ih;       
  15.   w   =   img.width   *   (ih   /   img.height);       
  16.    }       
  17.     else       
  18.     {       
  19.     w   =   iw;       
  20.      h   =   img.height   *   (iw   /   img.width);       
  21.     }       
  22.    }    
  23.   else    
  24.   {    
  25.   w = img.width;    
  26.   h = img.height;    
  27.   }    
  28.   }    
  29.       
  30.   pimg.width=w;       
  31.   pimg.height=h;       
  32.   pimg.style.display="";      
  33. }   

调用相当简单,代码如下:

  1. <img width="150" height="110" src="<?php echo $pic;?>" onload="SetImgSize(this,150,110)" />  

直接调用便可.

css代码如下:

  1. .thumbimg { max-width: 530px; max-height: 530px; }/* for firefox & ie7 */  
  2. * html .thumbimg {width: expression(this.width > 530 && this.width > this.height ? "530px" :auto); height:expression(this.height >530 ? "530px":auto);}/* for ie6  

方法二,代码如下:

  1. img {  
  2. width:expression(this.offsetwidth>160 ? 160 : true); /*自行修改图片宽度*/  
  3. height:expression(this.offsetheight>180 ? 180 : true); /*自行修改图片高度*/  
  4. }  

js整个页面都自动等比例缩放,代码如下:

  1. <script language="javascript" type="text/javascript">      
  2. function DrawImage()      
  3. {      
  4.     var FitWidth = 200,FitHeight = 200;     
  5.    var ImgD = document.getElementById('Image1');    
  6.   var image = new Image();    
  7.    image.src=ImgD.src;     
  8.     if(image.width>0 && image.height>0)     
  9.    {      
  10.         if(image.width/image.height>= FitWidth/FitHeight)     
  11.     {      
  12.           if(image.width>FitWidth)      
  13.           {      
  14.                ImgD.width=FitWidth;      
  15.                 ImgD.height=(image.height*FitWidth)/image.width;      
  16.             }      
  17.             else      
  18.             {      
  19.               ImgD.width=image.width;      
  20.                 ImgD.height=image.height;      
  21.             }      
  22.         }      
  23.         else     
  24.        {      
  25.             if(image.height>FitHeight)    
  26.     {      
  27.                 ImgD.height=FitHeight;      
  28.                 ImgD.width=(image.width*FitHeight)/image.height;      
  29.             }      
  30.             else     
  31.    {      
  32.                ImgD.width=image.width;      
  33.                 ImgD.height=image.height;      
  34.            }      
  35.        }      
  36.     }      
  37. }      
  38.     
  39. DrawImage();     
  40. </script>   
标签：

给我留言

Copyright © 小虎博客 保留所有权利.   Theme  Ality

用户登录