每个不封装块

Question

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

Div 带图像背景（全宽图像 - FWI）

Div 有图片背景（不同高度）

我的问题是即使对于每个选择器，第一个 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>

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 相关的东西。并且可以选择在 window 对象上放弃对 .resize() 的显式调用。

每个不封装块

Each not encapsulating blocks

html

javascript

css

jquery

resize