Question

我有一个jQuery函数，用于检查子图像高度的值，然后将父级高度设置为最小图像高度的值，然后添加overflow: hidden以避免溢出。

我从document.ready事件执行函数，但是我得到了奇怪的结果。我将获得HTMLobjectHeight，0，未定义或页面加载上的正确值。为什么会变化？它是在图像加载之前触发的吗？

function setContainHeight() 
{
    var container = $('.com-background');
    var imgs = $('.com-background img');
    var smallestImg = imgs[0];
    $(imgs).each(function() 
    {
        if ($(this).height() < $(smallestImg).height() )
            smallestImg = $(this).height();

    });

    container.height(smallestImg);
    container.css("overflow", "hidden");
};

我遇到的另一个问题是，当我将此函数添加到window.resize事件时，它也会在页面加载时触发，并提供未定义的结果。

HTML

<div class="com-background" style="height: 434px; overflow: hidden;">
    <h1 class="community_title">Sun Lakes</h1>
    <img width="250" height="167" src="http://192.168.33.10.xip.io/wp-content/uploads/2013/04/Ocotillo-lake-e1404789921289.jpg" class="wp-post-image" alt="Ocotillo - lake" style="display: block; z-index: 1;">
    <img width="250" height="188" src="http://192.168.33.10.xip.io/wp-content/uploads/2013/04/Resort-e1404789892490.jpg" class="attachment-post-secondary-image-thumbnail active" alt="Resort" style="z-index: 3; opacity: 0.988634061784097;">
    <img width="837" height="378" src="http://192.168.33.10.xip.io/wp-content/uploads/2014/05/homestead-error.png" class="attachment-post-tert-image-thumbnail" alt="homestead-error" style="z-index: 2;">  <div class="numeric_search">
</div>

SASS / CSS

.com-background 
{
    width: 100%;
    position: relative;
    img 
    {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        max-width: 100%;
        height: auto;
    }
}

Answer 1

如果你想获得所有高度的图像，你需要确保所有图像都已下载并准备好使用...当然，你需要使用$（window）.load（）而不是$（文档）。读得那样：

$(window).load( function() {
  setContainHeight();
  $(window).resize( setContainHeight );
});

Answer 2

要确保已加载图片，请先使用$(window).load事件监听器

我还使用Math.min来获得最低图像高度

$(window).on("load resize", function(event) {

  // find container
  var container = $(".com-background");

  // get image heights in an array
  var heights = container.find("img").map(function(idx, elem) {
    return $(elem).height();
  }).get();

  // get the minimum height
  var minimum = Math.min.apply(null, heights);

  // set container height and overflow property
  container.height(minimum).css({overflow: "hidden"});
});

计算返回多个值

2 个答案: