按比例缩小图片方法总结

sunhw0725 · 发表于 2009-12-26 10:45:26

其实早些时候就想写一下这个东东，因为想换下主题用用，但发现日志里的图片却因为太大而把POST撑开了，变得很难看。我想遇到这个问题的人一定不少吧。之前一直太忙，没时间去整它，今天抽点时间写一下怎样解决图片撑开的问题，方法很多的、接下来一一给大家道来…

方法一：Max-width|Max-height
这是最简单的方法了，给图片一个最大的宽度和高度:

#Imgbox img {
               max-width: 500px;
               max-height: 300px;
               border:0;
               }
但它的效果并不怎么好，因为目前的IE6并不认识这个max-width和max-height。而且有时候图片的宽高相差很大。这样做后图片会变形。

方法二：Max-width/height+Expression
先来了解下什么是CSS expression：

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

了解了之后就简单了，其实就是把JS写到了CSS中，方便应用。我们来看下CSS怎么写:

#Imgbox img {
               max-width: 500px;
               width:expression(document.body.clientWidth > 500?"500px":"auto" );
               display:block;
               border:0;
               }
这样做虽然实现了等比例缩放，但它还是有它的缺点：会影响浏览器的速度，因为Expression是很占资源的一个东东，所以，一般不是没办法了不建议用CSS的Expression。难道没有好的解决方法了？不，当然有，接着往下看。

方法三：JavaScript实现
应该是这是现在最好的解决方法了，我们看下代码：

function ReImgSize(){
var await = document.getElementById("Imgbox"); //定义要改变的图片的容器ID
var imgall = await.getElementsByTagName("img");//取得容器内所有的IMG标签
  for (i=0;i<imgall.length;i++)
{
if (imgall.width>500) //如果图片的宽度大于500
   {
var oWidth=imgall.width; //取得图片的实际宽度
var oHeight=imgall.height; //取得图片的实际高度
imgall.width="500"; 重设图片的宽度为500
imgall.height=oHeight*500/oWidth; //重设图片的高度
   }
}
}
用法：把上面代码放到Head区，然后在Body标签中加入onload=”ReImgSize”;

最后给大家介绍一个jQuery的插件，用来改变图片的大小，而且还能实现图片的预加载。这个插件很小不到2KB。

它有4个参数：
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径

实际应用中我们先把JS加载进来然后用一句代码就能实现了

$("img").LoadImage(true,500,200,"loading.gif");
效果不错的。喜欢试下的可以在下面的链接下载DEMO。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询