站长论坛

标题: 按比例缩小图片方法总结 [打印本页]

---

作者: sunhw0725    时间: 2009-12-26 10:45
标题: 按比例缩小图片方法总结
其实早些时候就想写一下这个东东，因为想换下主题用用，但发现日志里的图片却因为太大而把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。

---

欢迎光临 站长论坛 (http://tzlink.com/bbs/)

Powered by Discuz! X3.2