Каждый не инкапсулирующий блок

Question

Я создаю сайт, который динамически позиционирует контент в середине группы разделов.

Див с фоном изображения (Полная ширина изображения - FWI)

Див с фоновым изображением (разной высоты)

Моя проблема заключается даже с каждого селектора первым DIV используется для диктовать высоту любые другие дивы под ним, я, очевидно, что-то отсутствует довольно основные

Jquery

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); 
}); 

Сыпучие любой другой Jquery вещи, связанные с .fwi-image. И необязательно освободите свой явный вызов до .resize() на объекте window.