jquery 中在浏览器大小大于图片大小后图片正常显示，否则图片进行缩放

首先引入这个下边这个js。

/*图片缩放*/

(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);

使用方法

在head 或body 中加入下边这段代码就OK了。

<script type="text/javascript">
       $('img').resizeimage();
   </script>