如果是IE7以上、chrome、firefox、opera、safari可以用max-width和height:auto就行了，可惜国内杯具，IE6 的使用者还不少（当然，我自己的博客主题就懒的理 IE6 了）。

这也是朋友的需求，貌似网上有很多种方法，有js实现的、有php实现的，因为朋友的主题本身用了 jQuery库，所以我自己想想还是用 jQuery 来实现吧。

折腾了好一阵才搞定，主要是忘了兼容 IE6 了，然后为了兼容即将死亡的 IE6 费了不少时间。

代码写出来后看起来就不复杂了，主要是自己对 jQuery 不熟，只能写好慢慢测试才能出来效果，效率比较低，没办法，我很懒，只掌握方法不看书的。

前提：先加载 jQuery 库，具体怎么加载问 Google小弟弟吧（Google是90后），1.3.2 版本即可，其实 1.2.6 也行

下面是核心代码：（改进的代码在后面）

jQuery(document).ready(function() {
   //jQuery方法实现自动缩放图片 beta1 by zwwooooo
   var img_cont=($('.post').find('img')).length; //查找并计算文章里面的图片个数，根据自己主题写选择器
   if (img_cont != 0) { //做个判断，没有图片就不需要了
      var maxwidth=600; //定义图片最大宽度，超过此宽度的图片自动缩为 maxwidth 值
      var maxwidth_value=maxwidth+'px';
   	for (var i=0;i<=img_cont-1;i++) {
   		var max_width=$('.post img:eq('+i+')');
   		if (max_width.width() > maxwidth) {
   			max_width.addClass('max_width_img').removeAttr("width").removeAttr("height").css({"cursor":"pointer","width":maxwidth_value,"height":"auto"});
   		}
   	}
   }
});

代码也许不完善（没有在各种环境下测试），或许有这种那种问题，有兴趣者自行测试折腾。

高手们觉得有什么不足之处请指教。

2011.4.5 22:20 发现问题：如果文章图片载入慢会导致判断失效!（已解决）

……后来琢磨后发现下面这样就OK鸟：

效果可以围观 http://schiy.com/blog 文章里面的图片：大于680px的会在图片右上角有个放大镜标识

jQuery(window).load(function(){
/* jQuery方法实现自动缩放图片 beta2 by zwwooooo */
   	var img_cont=($('.post').find('img')).length; //查找并计算文章里面的图片个数，根据自己主题写选择器
   	if (img_cont != 0) { //做个判断，没有图片就不需要了
   		var maxwidth=600; //定义图片最大宽度，超过此宽度的图片自动缩为 maxwidth 值
   		var maxwidth_value=maxwidth+'px';
   		for (var i=0;i<=img_cont-1;i++) {
   			var max_width=$('.post img:eq('+i+')');
   			if (max_width.width() > maxwidth) {
   				max_width.addClass('max_width_img').removeAttr("width").removeAttr("height").css({"cursor":"pointer","width":maxwidth_value,"height":"auto"});
  			}
  		}
   	}
});

这下正常鸟。

zww

赏

or

oooo

• 本文标题：jQuery方法实现自动缩放图片[beta1、beta2]
• 本文链接：https://zww.me/archives/25438
• 发布时间：2011年04月05日 10:18
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！