Question

是否可以在窗口调整大小时将div设为其父级的大小？

我目前有以下html

<div class="sliderContainer">
    <div id="cyler">
        <div class="cy1" style="background-image:url(images/Keggy_Banner_Ie.jpg); background-position:center center; background-size:2000px 390px;  height:390px;"></div>
        <div class="cy1" style="background-image:url(images/Bravissimo_Banner_ie.jpg); background-position:center center;  background-size:2000px 390px; height:390px;"> </div>
        <div class="cy1" style="background-image:url(images/Radley_Banner_ie.jpg); background-position:center center;  height:390px;"> ></div>
        <div class="cy1" style="background-image:url(images/Tiger_Banner_ie.jpg); background-position:center center; height:390px;"></div>
    </div>
</div>

sliderContainer类的最大宽度为2000px，最小宽度为1000px（隐藏的oveeflow）

目前.cy1以全窗口大小加载div并且图像居中 - 这很酷 - 但如果我调整.cy1 div的大小 - 它们保持原始窗口宽度。

我尝试使用以下JS来检测屏幕重新调整大小并将屏幕宽度应用于div - 使其延伸到其父项大小（脚本的第一部分确保它仅在调整大小时触发一次），但我也没有运气 - 任何建议？

var sizl = $(window).width();
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        $("#cycler .cy1").width(sizl);
    }, 500);
});

Answer 1

计算调整大小函数内的窗口宽度

$(window).resize(function () {
    delay(function () {
        var sizl = $(window).width();
        $("#cycler .cy1").width(sizl);
    }, 500);
});

Answer 2

你可以这样设置：

  var windowWidth = $(window).width();
  $('#cycler .cy1').css({'width':windowWidth});

调整父级的div大小

2 个答案: