每個不封裝塊

我正在構建一個網站，動態地定位內容在一組部分的中間。每個不封裝塊

股利與圖像背景（全寬度的圖像 - FWI）

股利與圖像背景（不同高度的）

我的問題是即使在每個選擇器的第一個div是用來決定了高度下面的所有其他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>

來源

2015-09-12 James Claridge

這裏是網站：你可以看到第二畫面塊文本被坐得低，因爲其拍攝第一張照片塊的大小 http://prestlaundry.com/ –

把這個放在你的文件中。

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()的明確呼叫。

來源

2015-09-12 18:22:52

這並不雖然解決我的問題因爲這些部分中的每一個都可能位於我的DOM中的不同位置 - 由於頁面佈局不同是否有（'this'）選擇器可以使用？ –

哦，我看到，圖像的'load'事件處理程序在加載後註冊得太晚。 –

這是否適合你？ –

每個不封裝塊

回答

相關問題