最简单的方法：
以下为引用的内容：
<img border="0" src="图片路径" onload="javascript:if(this.width>500)this.width=500" /> |
www.phperz.com
这样可是虽然也可以实现缩图的效果，但是如果图片很大，页面还是会先被撑破，再缩小.
第一种方法：
以下为引用的内容：
<script language="JavaScript">
<!--
var flag=false; www~phperz~com
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){ phperz~com
flag=true;
if(image.width>650){
}else{
ImgD.width=image.width; php程序员站
ImgD.height=image.height;
}
}
}
//-->
</script> |
对应的HTML代码： phperz.com
以下为引用的内容：
<img border=0 src="图片路径" onload="javascript:DrawImage(this);" width="650" /> |
附其他方法供参考： www~phperz~com
1、用鼠标拖动来改变大小
以下是代码片段：
以下为引用的内容：
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){ phperz.com
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script> php程序员站
<img src="7say.gif" ondrag="resizeImage(event,this)"> |
www~phperz~com
2、用鼠标滚动控制图片大小
以下为引用的内容：
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;"> |
php程序员站
3、图片标签里用代码控制大小
以下为引用的内容：
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;"> |
www~phperz~com
4、CSS控制图片大小
1. css2直接实现 (IE暂不支持):
以下为引用的内容：
img{max-width: 500px;} |
php程序员之家
2. expression实现(IE only):
以下为引用的内容：
img{width:expression(width>500?"500px":width);} |
phperz.com
3. 使用js. 方法: 用 document.getElementsByTagName(”IMG”) 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作 www~phperz~com
|
