最简单的方法:
以下为引用的内容: <img border="0" src="图片路径" onload="javascript:if(this.width>500)this.width=500" /> |
phperz.com
这样可是虽然也可以实现缩图的效果,但是如果图片很大,页面还是会先被撑破,再缩小.
第一种方法:
以下为引用的内容: <script language="JavaScript"> <!-- var flag=false; 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; phperz.com ImgD.height=image.height; } } } //--> </script> |
对应的HTML代码: www~phperz~com
以下为引用的内容: <img border=0 src="图片路径" onload="javascript:DrawImage(this);" width="650" /> |
附其他方法供参考: 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> www.phperz.com <img src="7say.gif" ondrag="resizeImage(event,this)"> |
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;"> |
phperz~com
4、CSS控制图片大小 1. css2直接实现 (IE暂不支持):
以下为引用的内容: img{max-width: 500px;} |
phperz.com
2. expression实现(IE only):
以下为引用的内容: img{width:expression(width>500?"500px":width);} |
phperz.com
3. 使用js. 方法: 用 document.getElementsByTagName(”IMG”) 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作 phperz.com
|