Jquery让图片根据浏览器窗口大小自动缩放

(function($){
    $.fn.resizeimage = function(){
        var imgLoad = function (url, callback) {
            var img = new Image();
            img.src = url;
            if (img.complete) {
                callback(img.width, img.height);
            } else {
                img.onload = function () {
                    callback(img.width, img.height);
                    img.onload = null;
                };
            };
        };
        var original = {
            width:$(window).width()
        };
        return this.each(function(i,dom){
            var image = $(this);
            imgLoad(image.attr('src'),function(){
                var img = {
                    width:image.width(),
                    height:image.height()
                },percentage=1;
                if(img.width<original.width){
                    percentage = 1;
                }else{
                    percentage = (original.width)/img.width;
                }
                image.width(img.w=img.width*percentage-30).height(img.h=img.height*percentage);
                $(window).resize(function(){
                    var w = $(this).width();
                    percentage = w/img.width>1?1:w/img.width;
                    var newWidth = img.width*percentage-30;
                    var newHeight = img.height*percentage;
                    image.width(newWidth).height(newHeight);
                });
            });
        });
    };
})(jQuery);

使用方法:

$('img').resizeimage();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值