我正在尝试编写一个函数,它将div的高度按比例缩放到div的宽度。我一直试图在window.resize上触发事件但到目前为止没有运气。 div的宽度当前根据需要调整大小,但是在包含div元素的边界之外的高度调整开始彼此重叠并且没有正确包装。任何帮助将非常感激。提前谢谢!
jQuery:
$(window).resize(function(){
$('.bgCycle').each(function(){
newHeight = $(this).parent('div').height();
$(this).height(newHeight);
$(this).children('div').height(newHeight);
})
})
CSS:
.bgCycle{
border:1px solid red;
position:relative;
width:100% !important;
}
.imgContainerDiv{
position:relative;
width:100% !important;
}
HTML:
<div class="bgCycle bgCycle1" style="z-index:1;">
<div class="imgContainerDiv">
<img src="http://localhost:8888/aleo/wp-content/uploads/2011/12/img1.jpg" style="width:100%;"/>
</div>
<div class="imgContainerDiv">
<img src="http://localhost:8888/aleo/wp-content/uploads/2011/12/img2.jpg" style="width:100%;"/>
</div>
</div>
<div class="bgCycle bgCycle2" style="z-index:1;">
<div class="imgContainerDiv">
<img src="http://localhost:8888/aleo/wp-content/uploads/2011/12/img3.jpg" style="width:100%;"/>
</div>
<div class="imgContainerDiv">
<img src="http://localhost:8888/aleo/wp-content/uploads/2011/12/img4.jpg" style="width:100%;"/>
</div>
</div>
答案 0 :(得分:0)
很难看到您的HTML,但我猜测$(this).parent('div').height();
可能会引用窗口高度 - $(window).height();
?
newHeight = $(window).height();
这会做你想做的吗?