调整jQuery .cycle()div的大小

时间:2011-12-22 03:15:44

标签: jquery html resize height cycle

我正在尝试编写一个函数,它将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>               

1 个答案:

答案 0 :(得分:0)

很难看到您的HTML,但我猜测$(this).parent('div').height();可能会引用窗口高度 - $(window).height();

newHeight = $(window).height();

这会做你想做的吗?