<script type="text/javascript">
function rs(el){
//首先判断图片是长的还是宽的。如果是长的就对宽进行变形,否则对高进行变形
(el.width>el.height)?el.width = Math.min(65,el.width):el.height = Math.min(65,el.height);
}
</script>
<!-- 当图片加载完成后调用函数,记得下面不要限制住长和宽 -->
<img οnlοad="rs(this)" src="http://www.emlily.cn/attachments/month_0812/2009.jpg"/>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
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>
调用:<img src="images/toplogo.gif" οnlοad="javascript:DrawImage(this,100,100)">
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
js图片等比缩放
2008-07-04 09:14
<script language="JavaScript" type="text/JavaScript"> var ResizeIndexWidthMax=120 function resizeIndexByWidth(){ var imgs=document.images for(var i=0;i<imgs.length;i++){ if(imgs[i].getAttribute("resize",false)!="1"){continue;} if(imgs[i].width<=ResizeIndexWidthMax){continue;} imgs[i].width=ResizeIndexWidthMax imgs[i].outerHTML = imgs[i].outerHTML } } </script>
<script language="JavaScript" type="text/JavaScript"> <!-- //图片按比例缩放 var flag=false; function DrawImage(ImgD,Width,Height){ var image=new Image(); var iwidth = Width; //定义允许图片宽度,当宽度大于这个值时等比例缩小 var iheight = Height; //定义允许图片高度,当宽度大于这个值时等比例缩小 image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; 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; } } } //调用:<img src="图片" οnlοad="javascript:DrawImage(this)"> //-->
</script>
|
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
jquery等比缩放图片
2009-11-27 15:39
<!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="Content-Type" content="text/html; charset=gb2312" /> <title>按比例自动缩放图片</title> <script type="text/javascript" src="jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript"> <!-- function DrawImg(imgId,boxWidth,boxHeight) { alert(boxWidth); var imgWidth=$("#"+imgId).width(); var imgHeight=$("#"+imgId).height(); //比较imgBox的长宽比与img的长宽比大小 if((boxWidth/boxHeight)>=(imgWidth/imgHeight)) { //重新设置img的width和height $("#"+imgId).width((boxHeight*imgWidth)/imgHeight); $("#"+imgId).height(boxHeight); //让图片居中显示 var margin=(boxWidth-$("#"+imgId).width())/2; $("#"+imgId).css("margin-left",margin); } else { //重新设置img的width和height $("#"+imgId).width(boxWidth); $("#"+imgId).height((boxWidth*imgHeight)/imgWidth); //让图片居中显示 var margin=(boxHeight-$("#"+imgId).height())/2; $("#"+imgId).css("margin-top",margin); } }
//--> </SCRIPT> </head> <body> <div id="imgBox" style="width:100px;height:125px;border:1px solid red;overflow:hidden"> <img id="img1" alt="" src="3620424_medium222.jpg" οnlοad="DrawImg(this.id,90,80);" /> </div> </body> </html> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------
<script language="JavaScript" type="text/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>
<img src="XXXX" alt="自动缩放后的效果" οnlοad="javascript:DrawImage(this,"200","200");" />
图片外边框 <table width='150' height='150' border='0' cellpadding='0' cellspacing='0' style='border: 1px solid #666666; display:block; width:150px; height:150px;padding:50px;'> <tr> <td width='300' height='68' align='center'> </td> </tr> </table>
|