在一些相册中通常都需要用到这个功能

通过我的观察各大网站都用到了不同的方法：

1.通过上传时候的制作缩略图，来控制图片的高度和宽度；如果页面显示尺寸进行变更就会遇到大麻烦

2.通过FLASH展示，flash中相关的功能；需要一定的flash功底，传输量大，需要用户安装FLASH（当然这已经不是什么问题了）

有没有什么一劳永逸的办法呢？直接通过HTML+CSS实现？

主要的问题就出在IE6~7版本的浏览器上，支持标准CSS的浏览器可以通过CSS中的max-height及max-width的2个属性很容易的实现该功能

那我们就专注与IE上的处理吧！~

首先通过查询IE有自己的expression（在IE8已经开始不支持了，但不影响我们，因为我们只要IE6~7中产生效果）

_height: expression(Math.min(85,this.height)+"px");_width:expression(Math.min(85,this.width)+"px");

好，功能已经实现，IE7中展示完美！但IE6中多列上的图片有问题，有的高不对，有的宽不对（大概是IE中等比例缩放不能同时定义height及width）

这时我们只要通过一定的判断就可以让代码自动判断，根据不同的要求用不一样的代码，一般是3种效果

1.同宽高：zoom:expression(function(e){if(e.height>e.width){e.style.height = Math.min(85,e.height)+"px";}else{e.style.width= Math.min(85,e.width)+"px";}}(this));

只需要判断高和宽的大小就可以了

2.最大宽度固定，高度自定：zoom:expression(function(e){if(e.width > 85){e.style.width= Math.min(85,e.width)+"px";}}(this));

只需要判断宽度是否超出规定大小（同理最大高度固定，宽度自定，情况比较少）

3.最大宽度和高度都固定：zoom:expression(function(e){if(e.height/85>e.width/85){e.style.height = Math.min(85,e.height)+"px";}else{e.style.width= Math.min(85,e.width)+"px";}}(this));

判断下高度比和宽度比之间的大小，大的那个进行处理就可以了

这里为什么选择通过zoom来进行处理呢？因为涉及到另一个问题：效率，expression用的为什么少，因为它是不断的进行计算的，那样对浏览器的负担很大，如果显示的地方很多甚至会出现死机的情况。

这么致命的问题，如何解决呢？通过网上的查找发现了个重定的方法，就是将被定义expression的属性在计算的最后重新定义

zoom:express(this.style.zoom = '1';);这样这个效果就只会被触发一次就停止了。记住不能用hack方式书写，无效！

那上面我们就可以这样写

zoom:expression(function(e){if(e.height>e.width){e.style.height = Math.min(85,e.height)+"px";}else{e.style.width= Math.min(85,e.width)+"px";}e.style.zoom = 1;}(this));

那样负担就小多了，而且不会因为被重定义就对多个调用的地方显示同样的效果，应该是CSS应用的一个方式，本人对这些比较细致的问题没什么研究，效果达到也就可以了。

这样的代码就不是符合标准的了，用的人可要注意了！~

本人还是比较热衷与FLASH，因为可以在一个元素里面把效果全部都定义进去什么左翻，右翻等等，但不会，只好先研究出最直接的方法，日后有机会再尝试flash的！~

注：实际过程中IE6中又遇到了个问题，在图片加载中样式就直接处理了，那图片就会很小

首先经过测试，在IE下图片读取完之前不能修改height及width的值，否则就会变样，那这时可以先判断是否大于所需的宽度或高度后再进行赋值

然后在判断是否加载完毕：if(e.readyState == "complete"){}，将上述内容添加进去，则可以实现，因为expression本身的特性会不断执行，所以这里不需要写定时器！

但在现在的情况下因为图片在加载过程中没有设定宽度和高度，当比当前所需大时会撑开页面，当然通过overflow:hidden;但如果不能写的时候

可以把if(e.readyState == "complete"){}只包住e.style.zoom = '1';那样可以不断判断

上面的就可以修改成：

zoom:expression(function(e){if(e.height/350>e.width/600){e.style.height = Math.min(350,e.height)+"px";}else{if(e.width > 600 ){ee.style.width= Math.min(600,e.width)+"px";}if(e.readyState == "complete"){e.style.zoom = 1;}}(this));

内部的缩略宽高按实际需求进行修改即可