JS控制图片等比例缩放的示例代码

 本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

代码如下:
<SCRIPT language="JavaScript">
function DrawImage(ImgD,FitWidth,FitHeight){   
    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;   
            }   
        }   
    }   
}   
 
</script>
 
 
调用方法:
 代码如下:
<a href="admin/<? echo $rscase['path']?>" target="_blank"><img src="admin/<? echo $rscase['path']?>" alt="点击放大图片" width="180" height="180" onload='javascript:DrawImage(this,180,);' hspace="3" vspace="3" border="0" /></a>
 

时间: 2024-10-04 00:01:26

JS控制图片等比例缩放的示例代码的相关文章

JS控制图片等比例缩放的示例代码_javascript技巧

复制代码 代码如下: <SCRIPT language="JavaScript">function DrawImage(ImgD,FitWidth,FitHeight){       var image=new Image();       image.src=ImgD.src;       if(image.width>0 && image.height>0){           if(image.width/image.height>

CSS控制图片成比例缩放

按比例缩小或者放大到某个尺寸,对于标准浏览器(如Firefox),或者最新都IE7浏览器, 直接使用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中嵌入javascript code 来

JS图片等比例缩放方法完整示例_javascript技巧

本文实例讲述了JS图片等比例缩放方法.分享给大家供大家参考,具体如下: <!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>

如何实现php图片等比例缩放_php技巧

通过文章给出的源代码可实现针对图片的等比缩放生成缩略图的功能,非常实用的技巧哦. 新建文件index.php,需要在统计目录下有个图片为pic.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename="pic.jpg"; $per=0.3; list($width, $height)=getimagesize($filename); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetrueco

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

五款js 图片等比例缩放效果

<script type="text/网页特效"> <!-- //图片按比例缩放---素材图片页面控制 var flag=false; function newdrawimage(imgd){  var image=new image();  var iwidth = 200;  //定义允许图片宽度  var iheight = 150;  //定义允许图片高度  image.src=imgd.src;  if(image.width>0 &&

JS控制图片翻转示例代码

 本篇文章主要介绍了JS控制图片翻转示例代码(兼容firefox,ie,chrome) 需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

js图片等比例缩放

js图片等比例缩放 /使用onload=resizeImage(this,长,宽); function resizeImage(img,w,h) {     var image=new Image();     image.src = img.src;     if(image.width > 0 && image.height > 0)     {         if(image.width / image.height >= w/h)         {      

js图片按比例缩放代码

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