2013-06-07 3 views
0

Возможно ли сделать div размером с родительский элемент при изменении размера окна?Сделать размер 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, они остаются на первоначальной ширине окна.

Я попробовал следующее 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); 
}); 
+1

Почему вы не установите 'width' на' '100% ? –

+0

попробовал это - он работает на загрузке страницы - не при изменении размера – Dancer

+2

Тогда, вероятно, одному из родителей нужна «ширина: 100%». –

ответ

2

ширина окна Расчет внутри функции изменения размера

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

Вы можете установить это следующим образом:

var windowWidth = $(window).width(); 
    $('#cycler .cy1').css({'width':windowWidth}); 
Смежные вопросы