图片自动缩小完美策略 分享

要求是，如何把文章中的大图片自动缩小，以防止图片破坏页面的布局，同时又不希望小图也被放大，最重要的是要兼容IE浏览器和火狐等主流浏览器。

XML/HTML代码

<img border="0" src="图片路径" onload="javascript:if(this.width>500)this.width=500" />

虽然也可以实现缩图的效果，但是如果图片很大，页面还是会先被撑破，再缩小，效果也不理想。

实现思路很简单，改造js代码，既然图片很大，那么我们先用最经典的限制width的方法限制大图的宽度，但是小图怎么办？小图我们用onload的方法再缩小，就这么搞定了。完美代码如下：

对应的js:

JavaScript代码

<script language="JavaScript">

<!--

var flag=false;

function DrawImage(ImgD){

var image=new Image();

image.src=ImgD.src;

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

flag=true;

if(image.width>650){

}else{

ImgD.width=image.width;

ImgD.height=image.height;

}

}

}

//-->

</script>

对应的HTML:

XML/HTML代码

<img border=0 src="图片路径" onload="javascript:DrawImage(this);" width="650" />

附其他方法供参考：
1、用鼠标拖动来改变大小
以下是代码片段：

JavaScript代码

<SCRIPT LANGUAGE="JavaScript">

function resizeImage(evt,obj){

newX=evt.x

newY=evt.y

obj.width=newX

obj.height=newY

}

</script>

<img src="7say.gif" ondrag="resizeImage(event,this)">

2、用鼠标滚动控制图片大小
以下是代码片段：

XML/HTML代码

<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">

3、图片标签里用代码控制大小
以下是代码片段：

XML/HTML代码

<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">

4、CSS控制图片大小
1. css2直接实现 (IE暂不支持):

CSS代码

img{max-width: 500px;}

2. expression实现(IE only):

CSS代码

img{width:expression(width>500?"500px":width);}

3. 使用js. 方法: 用 document.getElementsByTagName(”IMG”) 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作