jQuery 窗口调整大小问题

Question

我有一个在加载和窗口调整大小时运行的小函数..但是窗口调整大小不起作用。非常确定语法是正确的..因为我之前已经运行过窗口调整大小的函数。不太明白吗？

现场直播网站在这里： 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

乍一看，它没有正确响应调整大小事件的原因是因为 dimensions() 和 center() 函数使用仅初始化一次的变量，而它们应该在时间调整大小事件发生。否则，您会尝试对调整大小事件做出反应，但会一遍又一遍地使用相同的值，例如，无论浏览器大小如何，availableHeight 变量都具有与运行时相同的值第一次响应功能。

Answer 2

window.resize() 事件在不同的浏览器中存在很多错误。尝试使用 Ben Alman 的 jQuery 调整大小事件，通常可以修复所有调整大小问题

Answer 3

查看您的代码，似乎使用纯 CSS 可以获得相同的结果。

如果我的想法是正确的，您想随窗口一起调整图像的大小，并将图像保留在页面的中间。

通过在图像上设置 % 宽度，您可以使其根据其父元素调整大小。

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

通过在 #main 上设置 margin:0 auto;，您将始终保持页面居中。

这是一个演示： http://jsfiddle.net/BjVun/