如何在調整瀏覽器大小時將jquery幻燈片放大到100％寬度？

Question

我在我的網站上有一個jQuery幻燈片。使用css寬度：100％，每張幻燈片的寬度均爲100％。在每張幻燈片中都有一個單獨的div，寬度爲1160px，邊距爲0：自動將其居中在幻燈片中。每張幻燈片都有一個不同的背景圖像，這些背景圖像位於中央，因此會從幻燈片的邊緣流血。

這一切似乎都工作正常，正確的圖像和導航正確定位在幻燈片中，直到我調整瀏覽器窗口。當我這樣做時，幻燈片似乎保留了頁面加載時的初始寬度。當我刷新幻燈片重新中心，一切都回到位置。

如何讓幻燈片保持100％的寬度，而無需每次調整窗口大小時刷新頁面？

Answer 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); 
    }); 
}); 

另請參見：

• What does "width: 100%" do in CSS?
• .ready()
• .resize()
• .width()