Code resize image theo parrent tag (thẻ chứa image) bằng javascript

• code

Code resize image theo parrent tag bằng javascript

Đôi khi bạn lập trình web để hiển thị hình ảnh trên web, chúng ta rất khó chịu khi hình ảnh hiện rất khó coi (như ví dụ hình dưới thì hình ảnh bị kéo lại). Sau đây là một đoạn code javascript nhỏ giúp cho chúng ta cải thiện. Chú ý : Bạn cần nhúng jquery vào trước.


<script>

(function($) {
    $.fn.resizeToParent = function(opts) {
        var defaults = {
            parent: 'div',
            delay: 100
        }

        opts = $.extend(defaults, opts);

        function positionImage(obj) {
            // reset image (in case we're calling this a second time, for example on resize)
            obj.css({
                'width': '',
                'height': '',
                'margin-left': '',
                'margin-top': ''
            });

            // dimensions of the parent
            var parentWidth = obj.parents(opts.parent).width();
            var parentHeight = obj.parents(opts.parent).height();

            // dimensions of the image
            var imageWidth = obj.width();
            var imageHeight = obj.height();

            // step 1 - calculate the percentage difference between image width and container width
            var diff = imageWidth / parentWidth;

            // step 2 - if height divided by difference is smaller than container height, resize by height. otherwise resize by width
            if ((imageHeight / diff) < parentHeight) {
                obj.css({
                    'width': 'auto',
                    'height': parentHeight
                });

                // set image variables to new dimensions
                imageWidth = imageWidth / (imageHeight / parentHeight);
                imageHeight = parentHeight;
            } else {
                obj.css({
                    'height': 'auto',
                    'width': parentWidth
                });

                // set image variables to new dimensions
                imageWidth = parentWidth;
                imageHeight = imageHeight / diff;
            }

            // step 3 - center image in container
            var leftOffset = (imageWidth - parentWidth) / -2;
            var topOffset = (imageHeight - parentHeight) / -2;

            obj.css({
                'margin-left': leftOffset,
                'margin-top': topOffset
            });
        }

        // run the position function on window resize (to make it responsive)
        var tid;
        var elems = this;

        $(window).on('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(function() {
                elems.each(function() {
                    positionImage($(this));
                });
            }, opts.delay);
        });

        return this.each(function() {
            var obj = $(this);

            // hack to force ie to run the load function... ridiculous bug 
            // http://stackoverflow.com/questions/7137737/ie9-problems-with-jquery-load-event-not-firing
            obj.attr("src", obj.attr("src"));

            // bind to load of image
            obj.load(function() {
                positionImage(obj);
            });

            // run the position function if the image is cached
            if (this.complete) {
                positionImage(obj);
            }
        });
    }
})(jQuery);

$("body img").each(function() {

    $(this).resizeToParent();

});

</script>