Проблема изменения размера окна jQuery

Question

У меня есть небольшая функция, которая запускается при загрузке и изменении размера окна ... но изменение размера окна не работает.Pretttty уверен, что синтаксис правильный .. потому что я запускал функции вне окна изменения размера раньше.Не можете разобраться?

живой сайт здесь: http://guit.dhut.ch/

JavaScript:

(function( $ ){
    $.fn.respond = function() {

    /* initialize function on window load and resize */

    $(document).ready(function() {
        dimensions();
    });
    $(window).load(function() {     
        dimensions();
    });
    $(window).resize(function() {
        dimensions();
    });

    /* declare variables */

    var pic = this
    var browserWidth = $(window).width();
    var imgRatio = this.width() / this.height()
    var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
    var browserRatio = browserWidth / availableHeight

    /* set image's height or width depending on the browser window's size */

    function dimensions() {
        if (browserRatio >= imgRatio ) {
            /* if the browser is landscape, set the image's height to fill the available space */
            //$('body').css('background', 'green');
            pic.height(availableHeight).width('auto');
        } else {
            /* if the browser is portrait, set the image's width to fill the browser width less margins */
            //$('body').css('background', 'red');
            pic.width(browserWidth - 40).height('auto');
        }
        center();
    };

    /* horizontally center content */

    function center() {
        pic.css('margin-left', (browserWidth - pic.width())/2);
    };

};
})( jQuery );

РЕДАКТИРОВАТЬ:

Благодаря @WTKУ меня это работает.Ниже новый код.Было несколько комментариев, предлагающих использовать CSS.Вот почему я этого не сделал: на этой домашней странице будут размещены как альбомные, так и портретные фотографии.Если бы я установил процентную высоту изображения, скажем, 100% его контейнера, ландшафтные изображения обрезались бы по странице после определенного размера.Это довольно легко и быстро, и позволяет моему сайту оставаться полностью отзывчивым.

JavaScript:

   (function( $ ){
    $.fn.respond = function() {

        /* initialize function on window load and resize */
        $(document).ready(function() {
            dimensions();
        });
        $(window).load(function() {     
            dimensions();
        });
        $(window).resize(function() {
            dimensions();
        });

        /* declare affected elements */
        var pic = this

        /* set image's height or width depending on the browser window's size */
        function dimensions() {

            /* declare variables */
            var browserWidth = $(window).width();
            var imgRatio = pic.width() / pic.height()
            var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
            var browserRatio = browserWidth / availableHeight

            if (browserRatio >= imgRatio ) {
                /* if the browser is landscape, set the image's height to fill the available space */
                pic.height(availableHeight).width('auto');
            } else {
                /* if the browser is portrait, set the image's width to fill the browser width less margins */
                pic.width(browserWidth - 40).height('auto');
            }
            /* horizontally center content */
            pic.css('margin-left', (browserWidth - pic.width())/2);
        };


    };
})( jQuery );

Answer 1

Глядя на ваш код, кажется, что вы можете достичь того же результата, используя чистый CSS.

Если мое мышление верное, вы хотите изменить размер изображения вместе с окном, а также сохранить изображение в середине страницы.

Установив ширину % на изображении, вы можете изменить его размер в соответствии с родительским элементом.

#main{
    width:50%;
}
img{
    width:100%;
}

и установив margin:0 auto; на #main, вы всегда будете держать центр по центру страницы.

Вот демоверсия: http://jsfiddle.net/BjVun/

Answer 2

На первый взгляд, причина, по которой он не реагирует на событие изменения размера, заключается в том, что функции sizes () и center () используют переменные, инициализированные только один раз, в то время как они должны вычисляться впроисходит событие изменения размера времени.В противном случае вы попытаетесь отреагировать на изменение размера события, но вы используете одни и те же значения снова и снова, например, независимо от того, какого размера браузер, переменная availableHeight имеет то же значение, что и при запуске response функция в первый раз.

Answer 3

Событие window.resize() довольно некорректно в разных браузерах.попробуйте использовать событие jQuery resize от Ben Alman , обычно исправляет все проблемы с изменением размера