0

是否可以在窗口调整大小时将 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 类的最大宽度为 2000 像素，最小宽度为 1000 像素（隐藏 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);
});
4

2 回答 2

2

在调整大小函数中计算窗口宽度

$(window).resize(function () {
    delay(function () {
        var sizl = $(window).width();
        $("#cycler .cy1").width(sizl);
    }, 500);
});
于 2013-06-07T12:01:57.420 回答
0

你可以这样设置：

  var windowWidth = $(window).width();
  $('#cycler .cy1').css({'width':windowWidth});
于 2013-06-07T12:26:19.030 回答