样让大图片自动缩小在一定范围内
作者：闪吧 类型:原创 来源:闪吧
样让大图片自动缩小在一定范围内 
解决思路： 我们知道，对于不指定大小的图片默认是以原大小显示，所以在不指定大小的图片上用onload事件触发脚本代码，在代码中判断图片的尺寸，如果超过指定值，将自动设置为允许的最大值。
具体步骤： 方法一：在图片加载完毕后用onload句柄触发执行脚本，重设图片的宽度为图片宽度和300两者的最小值。
代码示例：
<img src="demo.gif" onload="if(this.width>300)this.width=300">
或者
<img src="demo.gif"
onload="this.width=Math.min(this.width,300)">
方法二：在图片加载完后调用一个函数，在函数里根据图片的地址和大小，转化为VML方式输出，以VML方式输出的好处是在缩放时对图片的清晰度影响不大，缺点是需要IE5.5+的支持(IE5开始支持VML，但本例的效果需要IE5.5+的支持)，而且速度偏慢。
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML矢量化缩小图形与直接缩小的效果比较</title>
<style>
f\:*{behavior:url(#default#vml)}
</style>
<script>
function vImg(){
//VML代码原型，其中{width}，{height}和{src}是要用图片的图片的实际//参数替换的，加上大括号是为了查找替换的方便
var vml=’<f:Image style="WIDTH: {width}px; HEIGHT: {height}px" src = "{src}" \/>’
with(event.srcElement){
//取图片宽度和分辨率宽减500两者的最小值赋给变量w
var w=Math.min(width,screen.width-500)
/*图片高度也要用相应倍率的改变，VML里不象HTML里，只定义宽或高之一就行了，VML里必须宽和高都定义*/
var h=height*w/width
//将图片的HTML代码替换为VML输出的代码
outerHTML=vml.replace("{width}",w).replace("{height}",h).replace("{src}",src)
}
}
</script>
</head>
<body>
<img onload="vImg()" src="http://file.flash8.net/2003up/2003/6/21/20036212127433660.jpg">
<img src="http://file.flash8.net/2003up/2003/6/21/20036212127433660.jpg" style="this.width=Math.min(this.width,screen.width-500)">
</body>
</html>
注意：要使用VML，必须先以默认行为方式定义对象：
behavior:url(#default#vml)
特别提示
图1.8.14为方法二和方法二两种方式的缩放比较，可以看到，左图(方法二)缩放后的图片边缘平滑，整体效果比较好，而右图(方法一)则有毛边。
图1.8.14 VML矢量化缩小图形与直接缩小的效果比较
特别说明
本例主要是对图片的宽和高的大小判断和设置，对于方法二，因为兼容性不太好，所以最好慎用。
VML(Vector Markup Language) 矢量可标记语言，是Microsoft开发的一个XML词表，IE5以上的浏览器才支持。详情请参考Microsoft的官方介绍：
http://www.microsoft.com/mind/0100/VML/VML.asp
Math.min([number1[,number2[...[,numberN]]]]) 返回给出的零个或多个数值表达式中较小的值。
责任编辑:kissall 时间:2005年8月29日
- 最近更新