Can a div be resized to match its parent's size on window resize?
Here is the current HTML code:
<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>
The sliderContainer class has a max width of 2000px and a min width of 1000px (overflow hidden)
Currently, the .cy1 divs load at full window size and the image is centered - but if I resize the window, the .cy1 divs remain at the original width.
I have tried using the following JavaScript to detect screen resizing and apply the new width to the div to make it stretch to its parent's size. However, I am facing issues with this approach as well. Any suggestions?
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);
});