这两天遇到了一个问题,那就是如何把文章中的大图片自动缩小,以防止图片破坏页面的布局,同时又不希望小图也被放大,最重要的是要兼容IE浏览器和火狐等主流浏览器。我为这个命题着实花了一点功夫,最后竟然发现,苦苦寻觅,原来依人竟在灯火阑珊处。
刚开始我用CSS提供的expression方法实现了这个要求,心还想,“切,多大点事啊!”,但是很快我发现自己错了,expression这个方法虽然好,但是却非常消耗浏览器的资源,很多时候页面打开都无法正常浏览图片,还需要刷新页面也可以正常显示,在痛苦的挣扎了很久后,决定放弃。除了CSS外,我们还有JS嘛,于是接着到处搜索可用的js代码,接下来使用了类似如下的图片的直接缩图的方法,
这样可是虽然也可以实现缩图的效果,但是如果图片很大,页面还是会先被撑破,再缩小,效果也不理想。接下来使用了很多网上提供的各种js代码,不是效果很差就是无法兼容多个浏览器,实在没办法,还是自己研读程序,看看有什么办法。结果发现,最后的实现居然非常简单。
实现思路很简单,改造js代码,既然图片很大,那么我们先用最经典的限制width的方法限制大图的宽度,但是小图怎么办?小图我们用onload的方法再缩小,就这么搞定了。完美代码如下:
(查看全文…)
