javascript - 每个不封装 block

Question

我正在构建一个将内容动态定位在一组部分中间的网站。

带有图像背景的 Div(全宽图像 - FWI)

具有图像背景(不同高度)的 Div

我的问题是即使每个选择器的第一个 div 都用于指示它下面的任何其他 div 的高度，我显然遗漏了一些非常基本的东西

查询

jQuery(window).on("resize", function() {
  jQuery('.fwi').each(function() {
    jQuery('.image-outer').height(jQuery('.fwi-image').height());
  });
}).resize();


jQuery(".fwi-image img").load(function() {
  jQuery('.fwi').each(function() {
    jQuery('.image-outer').height(jQuery('.fwi-image').height());
  });
});

HTML

<div class="fwi">
    <div class="relative">      
          <div class="fwi-image full-width">
                <img width="1920" height="1080" src="">
          </div>  
          <div class="outer image-outer" style="height: 1080px;">
          my content which is dynamically positioned in the center vertically in my div
          </div>
   </div>
 </div>


<div class="fwi">
    <div class="relative">      
          <div class="fwi-image full-width">
                <img width="1920" height="1200" src="">
          </div>  
          <div class="outer image-outer" style="height: 1080px;">
         will take height from previous image-outer not its parent - it should be 1200
          </div>
   </div>
 </div>

Answer 1

将其放入您的文档中。

function adjustImageOuterHeight () {
    var fwiImage = jQuery(this).parent(".fwi-image");
    var imageOuter = fwiImage.next(".image-outer");
    imageOuter.height(fwiImage.height());
}

jQuery(document).ready(function () {
    jQuery(".fwi-image img")
        .load(adjustImageOuterHeight)
        .each(function () {
            if (this.complete) adjustImageOuterHeight.call(this);
        });
});

jQuery(window).resize(function () {
    jQuery(".fwi-image img").each(adjustImageOuterHeight);
});

松开与 .fwi-image 相关的任何其他 jQuery 内容。并可选择在 window 对象上放松对 .resize() 的显式调用。