利用jQuery自动缩放图片

平时写博客时,往往有很多日志不是自己原创,我们需要从别人那里吸收更多有价值的内容,这就没法避免转贴这一做法.呵呵~今天我在转《欣赏一组来自于Russ Mills的插画》时,里面的图片宽度超过了我页面要求的宽度。为了美观,我需要一段javascript代码能够自动缩放这些图片。

通过搜索引擎,找到了一篇基于jQuery的文章,这正是我所需要的:

/* 自动缩放一些大图的小JS
    吕 lvjiyong@Gmail.com
    http://www.lvjiyong.com/item/37817
	更新2007.9.28
*/

jQuery.fn.ImageAutoSize = function(width,height)
{
    jQuery("img",this).each(function()
    {
        var image = jQuery(this);
        if(image.width()>width)
        {
            image.width(width);
            image.height(width/image.width()*image.height());
        }
        if(image.height()>height)
        {
            image.height(height);
            image.width(height/image.height()*image.width());
        }
    });
}

调用:先引用上面的脚本或将上页的脚本放入自己的JS库,然后只要再加

jQuery(function($){ $("图片组所在的容器").ImageAutoSize(限制的最大宽度,限制的最大高度); });

就可以了~

例如:

jQuery(function($){ $(".entry").ImageAutoSize(495,'*'); });

下载:[download id=”2″]

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注