在调整大小时使父级的 div 大小答案

【问题标题】：Make div size of parent on resize在调整大小时使父级的 div 大小
【发布时间】：2013-06-07 20:39:27
【问题描述】：

是否可以在窗口调整大小时将 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);
});

【问题讨论】：

为什么不将width 设置为100%？
试过了 - 它适用于页面加载 - 不适用于调整大小
那么可能其中一位家长也需要width:100%。
您是否尝试在父级上设置样式显示：inline-block？
我会尝试，但不能保证 :)

标签： javascript jquery css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以这样设置：

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

【讨论】：