调整 jQuery .cycle() div 的大小

发布于 2024-12-22 07:49:43 字数 1476 浏览 3 评论 0原文

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

原文

I am in the process of trying to write a function that will scale the height of a div proportionally to the width of the div. I have been attempting to trigger an event on window.resize but with no luck so far. The width of the div currently resizes as desired but the height resizes outside of the bounds of the containing div elements start overlapping one another and are not wrapping properly. Any help would be much appreciated. Thanks in advance!

  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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恰似旧人归 2024-12-29 07:49:43

很难看不到你的 HTML，但我猜测 $(this).parent('div').height(); 应该引用窗口高度可能 - $(window)。高度（）；？

newHeight = $(window).height();

这会达到你想要的效果吗？

Hard without seeing your HTML, but I'm guessing that $(this).parent('div').height(); should reference the window height possibly - $(window).height();?