Question

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

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

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

Answer 2

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

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

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

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

并在margin:0 auto;上设置#main，您将始终以页面为中心。

以下是演示：http://jsfiddle.net/BjVun/

Answer 3

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

jQuery窗口调整大小问题

3 个答案: