这两天有人给了个命题，如何把文章中的大图片自动缩小，以防止图片破坏页面的布局，同时又不希望小图也被放大，最重要的是要兼容IE浏览器和火狐等主流浏览器。我为这个命题着实花了一点功夫，最后竟然发现，苦苦寻觅，原来依人竟在灯火阑珊处。

刚开始我用CSS提供的expression方法实现了这个要求，心还想，“切，多大点事啊！”，但是很快我发现自己错了，expression这个方法虽然好，但是却非常消耗浏览器的资源，很多时候页面打开都无法正常浏览图片，还需要刷新页面也可以正常显示，在痛苦的挣扎了很久后，决定放弃。除了CSS外，我们还有JS嘛，于是接着到处搜索可用的js代码，接下来使用了类似如下的图片的直接缩图的方法，

这样可是虽然也可以实现缩图的效果，但是如果图片很大，页面还是会先被撑破，再缩小，效果也不理想。接下来使用了很多网上提供的各种js代码，不是效果很差就是无法兼容多个浏览器，实在没办法，还是自己研读程序，看看有什么办法。结果发现，最后的实现居然非常简单。
实现思路很简单，改造js代码，既然图片很大，那么我们先用最经典的限制width的方法限制大图的宽度，但是小图怎么办？小图我们用onload的方法再缩小，就这么搞定了。完美代码如下：

对应的JS代码：

对应的HTML代码：

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

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

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

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

2. expression实现(IE only):

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