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

 代码如下 复制代码

//设置图片自动调整 
function   SetImgSize(pimg,iw,ih)   {   //pimg对象，iw缩略图宽度,ih缩略图高度 
  var   img   =   new   Image();  
  img.src = pimg.src;    
  var   w   =   iw;    
  var   h   =   ih;    
   
 if(img.width>0 && img.height>0) 
  {    
  if(img.width>iw||img.height>ih) 
  { 
    if((iw   /   ih)   >   (img.width   /   img.height))    
    {    
   h =  ih;    
  w   =   img.width   *   (ih   /   img.height);    
   }    
    else    
    {    
    w   =   iw;    
     h   =   img.height   *   (iw   /   img.width);    
    }    
   } 
  else 
  { 
  w = img.width; 
  h = img.height; 
  } 
  } 
   
  pimg.width=w;    
  pimg.height=h;    
  pimg.style.display="";   
} 

调用相当简单

 代码如下 复制代码
<img width="150" height="110" src="<?php echo $pic;?>" onload="SetImgSize(this,150,110)" />

直接调用便可

css代码

 

 代码如下 复制代码
.thumbimg { max-width: 530px; max-height: 530px; }/* for firefox & ie7 */
* html .thumbimg {width: expression(this.width > 530 && this.width > this.height ? "530px" :auto); height:expression(this.height >530 ? "530px":auto);}/* for ie6

方法二

 代码如下 复制代码

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

js整个页面都自动等比例缩放

 代码如下 复制代码

<script language="javascript" type="text/javascript">   
function DrawImage()   
{   
    var FitWidth = 200,FitHeight = 200;  
   var ImgD = document.getElementById('Image1'); 
  var image = new Image();  

   image.src=ImgD.src;  
    if(image.width>0 && image.height>0)  
   {   
        if(image.width/image.height>= FitWidth/FitHeight)  
    {   
          if(image.width>FitWidth)   
          {   
               ImgD.width=FitWidth;   
                ImgD.height=(image.height*FitWidth)/image.width;   
            }   
            else   
            {   
              ImgD.width=image.width;   
                ImgD.height=image.height;   
            }   
        }   
        else  
       {   
            if(image.height>FitHeight) 
    {   
                ImgD.height=FitHeight;   
                ImgD.width=(image.width*FitHeight)/image.height;   
            }   
            else  
   {   
               ImgD.width=image.width;   
                ImgD.height=image.height;   
           }   
       }   
    }   
}   
 
DrawImage();  
</script> 
时间： 2024-10-30 14:38:44

javascript实现图片等比例缩放代码的相关文章

js图片按比例缩放代码

js图片按比例缩放代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jjs图片按比例缩放代码</title> <script language="javascript教程">  //图片按比例缩放 var flag = false; function DrawIm

php实现图片等比例缩放代码_php技巧

新建文件index.php,需要在统计目录下有个图片为q.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename="q.jpg"; $per=0.3; list($width, $height)=getimagesize($filename); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetruecolor($n_w, $n_h); $img=imagecreatefromjpeg($fi

CSS图片等比例缩放代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conte

js兼容ie ff ie8 图片等比例缩放代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

Javascript实现图片按比例缩放的函数

javascript|函数 图片按比例缩放函数: <script language="JavaScript"><!--//图片按比例缩放var flag=false;function DrawImage(ImgD){var image=new Image();var iwidth = 150; //定义允许图片宽度var iheight = 100; //定义允许图片高度image.src=ImgD.src;if(image.width>0 &&

js 图片按比例缩放代码

这是一款可以根据图片的大小自行按比便进行放大或缩小效果的简单js代码哦. <script> function resizepic(thispic) { if(thispic.width>570) thispic.width=570; } function bbimg(o) {   var zoom=parseInt(o.style.zoom, 10)||100;   zoom+=event.wheelDelta/12;   if (zoom>0) o.style.zoom=zoom

js 图片等比例缩放代码_图象特效

复制代码 代码如下: var scaleImage = function(o, w, h){ var img = new Image(); img.src = o.src; if(img.width >0 && img.height>0) { if(img.width/img.height >= w/h) { if(img.width > w) { o.width = w; o.height = (img.height*w) / img.width; } else

四款css 图片按比例缩放实例(兼容ie6,7,firefox)

使用max-width,max-height:或者min-width,min-height的css属性即可.如:  代码如下 复制代码 img{max-width:100px;max-height:100px;} img{min-width:100px;min-height:100px;} 对于ie6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入网页特效 code 来实现图片的缩放 .thumbimage {max-width: 100px;max-h

JavaScript实现网页图片等比例缩放实现代码及调用方式_javascript技巧

在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB