登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

樱之花

叶散的时候,你明白欢聚;花谢的时候,你明白青春.

 
 
 

日志

 
 
关于我

分类中“我的实验室”是我在日常工作中的一些知识总结,有些写的比较匆忙,可能大家在阅读时会产生困扰,后期有时间我会重新整理编辑,谢谢大家的到访,您们的支持是我前进的动力!

js图片等比例自动调整(javascript)  

2009-08-11 23:43:24|  分类: JS程式 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

方案一:

<html>
<body>
<script language="javascript">
function reImg(obj,iw,ih) {
/************{ Coded By Tean }************
Ver_2007.03.09
Function:
Adjust Images size autmatically
for products preview width fixed size
Parameters:
obj: assign the object to adjust
*************{ Coded By Tean }************/
var iwh=iw/ih;
var image=new Image();
image.src=obj.src;
var w=image.width,h=image.height,wh=w/h;
if(w<=0 || h<=0) return false;
if(wh>=iwh){
   if(w>iw){
   obj.width=iw;
   obj.height=iw/wh;
   }else{
   obj.width=w;
   obj.height=h;
   }
}else{
   if(h>ih){
   obj.height=ih;
   obj.width=ih*wh;
   }else{
   obj.width=w;
   obj.height=h;
   }
}
}
</script>
<table height="104" border="1" cellpadding="0">
   <tr align="center" bgcolor="#00CCFF">
     <td width="110"><img src="11.gif" width=100% height=100% onload="reImg(this,this.width,this.height)"></td>
     <td width="110"><img src="12.gif" width=100% height=100% onload="reImg(this,this.width,this.height)"></td>
     <td width="110"><img src="21.gif" width=100% height=100% onload="reImg(this,this.width,this.height)"></td>
   </tr>
</table>

</body>
</html>

方案二:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TEST</title>
<script>
function goImg(){
o = document.images
for(i=0;i<o.length;i++)
if(o[i].width>100 && o[i].id='aa') o[i].width=400
}
</script>
</head>
<body onload=goImg()>

<img src="logo1.jpg" id="aa" width="180" >
<img src="logo2.jpg" id="aa" width="371">
</body>
</html>

 

http://hi.baidu.com/tean/blog

 

 

 

<html>

<head>

<title></title>

<script language="javascript" type="text/javascript">

/*实现图片的按比例缩放*/

function DrawImage(ImgD, iwidth, iheight) {

    var image = new Image();

    image.src = ImgD.src;

    if(image.width > 0 && image.height > 0){

        if(image.width / image.height >= iwidth / iheight){

            if(image.width > iwidth){

                ImgD.width = iwidth;

                ImgD.height = (image.height * iwidth) / image.width;

            }

            else{

                ImgD.width = image.width;

                ImgD.height = image.height;

            }

            // ImgD.alt = image.width + "×" + image.height;

        }

        else{

            if(image.height > iheight){

                ImgD.height = iheight;

                ImgD.width = (image.width * iheight) / image.height;

            }

            else{

                ImgD.width = image.width;

                ImgD.height = image.height;

            }

            // ImgD.alt = image.width + "×" + image.height;

        }

    }

}

//  ---------------------------------------

</script>

</head>

<body>

<img src="test/pic.jpg" onload="DrawImage(this,51,72);">

</body>

</html>

  评论这张
 
阅读(1755)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018