当我调整浏览器大小时，如何让 jquery 幻灯片调整为 100% 宽度？答案

【问题标题】：How can I get jquery slideshow to resize to 100% width when I resize browser?当我调整浏览器大小时，如何让 jquery 幻灯片调整为 100% 宽度？
【发布时间】：2012-03-21 16:59:14
【问题描述】：

我的网站上有一个 jquery 幻灯片。每张幻灯片的宽度为 100%，使用 css width:100%。在每张幻灯片中都有一个单独的 div，其宽度为 1160px，margin:0 auto 使其在幻灯片中居中。每张幻灯片都有不同的背景图片，该图片居中，因此会从幻灯片的边缘溢出。

在我调整浏览器窗口大小之前，幻灯片中正确定位的图像和导航似乎一切正常。当我这样做时，幻灯片似乎保留了页面加载时的初始宽度。当我刷新幻灯片重新居中时，一切都会回到原位。

如何让幻灯片保持 100% 的宽度，而无需在每次调整窗口大小时刷新页面？

【问题讨论】：

$(window).resize(function() {});

标签： jquery css

【解决方案1】：

你看过$(window).resize(function(e) { /* do re-sizing work */ })

进一步扩展：

我必须首先说，没有太多理由让 div 上的 100% 宽度不起作用，除非在其他地方动态重置宽度，或者如果父级具有设定的宽度。

但是，如果您必须有一个 jQuery 示例，它只是一种可以完成的方法（有很多），那就去吧：

//  simple way to start jQuery, similar to `window.onload = function(event) {`
$(function() {
    //  Establish a simple timer var to make sure code doesnt run like a wild hamster on sesame seed oil
    var tmrResize;
    //  jQuery way to call `window.onresize = function(event) {`
    $(window).resize(function(e) {
        //  simply clear timer, no need for if statement, if it's undefined, its cleared
        clearTimeout(tmrResize);
        //  set timer for 1/4 of a second which outa be enough time to know someone is done resizing a window,
        //  the longer the timer, the more glitchy it will appear in the end
        //  and fyi, i see alot of people shorten timers by replacing the function call,
        //  example (   setTimeout(myFunction, 250);    )
        //  i can tell ya from experience, such method is not "cross-browser" friendly
        //  just simply put your function, if external, inside the function call
        tmrResize = setTimeout(function() {
            //  jQuery standard similar to document.getElementsByTagName("div").style.width = screen.width
            $("div").width($(document).width());
        }, 250);
    });
});

另见：

【讨论】：

感谢 SpYk3HH 差不多了。它适用于调整大小和加载页面时，但由于某种原因，每张后续幻灯片似乎都“忘记”了它应该是全宽的。我想我需要让 resize 函数在每次执行循环函数时执行，以便在加载时调整每张幻灯片的大小。