每个不封装块

我正在构建一个网站，动态地定位内容在一组部分的中间。每个不封装块

股利与图像背景（全宽度的图像 - 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'事件处理程序在加载后注册得太晚。 –

这是否适合你？ –

每个不封装块

回答

相关问题