获取图像高度以计算外部div的高度

Question

I'm trying to get the dynamic height of an image to add the corresponding css to it's parent div and another following div.

My js looks like this at the moment:

  $(".imgContainer img").load(function(){
      var imageHeight = $(this).height();
      console.log(imageHeight);
      $(".parentDiv").css('min-height',imageHeight);
      $(".parentDiv .anotherDiv").css('height',imageHeight);
  });

  $(window).resize(function() {
      var imageHeight = $(".imgContainer img").height();
      $(".parentDiv").css('min-height',imageHeight);
      $(".parentDiv .anotherDiv").css('height',imageHeight);
  });

But: Every 2 to 3 times the height is not right or not loading properly. That means I'm not getting the img height in the variable just before I can add it via css. I'm just having the wrong value in my console.

It always works on resize.

Just in case, that's my html:

<div class="parentDiv">
    <div class="imgContainer">
        <img src="test.jpg" />
    </div>
    <div class="anotherDiv"></div>
</div>

Thanks for your help. Cara

Answer 1

The problem seems to be caused by .load() method.

I made this fiddle and it's working.

Note: .load() is deprecated see this

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser It doesn't fire correctly in WebKit if the image src is set to the same src as before It doesn't correctly bubble up the DOM tree Can cease to fire for images that already live in the browser's cache

Use .on("load", function) instead of .load(function) , like follow:

$(".imgContainer img").on("load",function(){
      var imageHeight = $(this).height();
      $(".parentDiv").css('min-height',imageHeight);
      $(".parentDiv .anotherDiv").css('height',imageHeight);
      $(".result").html("Image height: " + imageHeight);
  });

I hope it helps you. Bye