Question

我正在构建一个动态定位内容的网站。

Div with image background（全宽图像 - 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>

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

每个都没有封装块

1 个答案: