title: Get height of container with responsive image
body: <p>I'm trying to position a div (intro-text) in another div (intro-container). I use css and jQuery to do that.</p>
  
  <pre><code>.intro-text {
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  }
  </code></pre>
  
  <p>In the div (intro-text) there is an image that has a responsive width / height. It has a width of 35% of the parent container (intro-container).</p>
  
  <p>I needthe height of the intro-text div to position it in the container. It works fine, except on the first load. It returns 40px (the height of the text).</p>
  
  <pre><code>$(document).ready(function(){
  
          backgroundResize();
  
          $(window).resize(function(){
              backgroundResize();
          });
      });
  
  function backgroundResize(){
  console.log("height:" + $(".intro-text").height());
  }
  </code></pre>
  
  <p>It seems that the image isn't loaded yet, so it returns the wrong value.. Even if use document ready.. How can I fix this?</p>
  
  <pre><code>&lt;div class="intro-container container"&gt;
      &lt;div class="intro-text"&gt;
    &lt;p&gt;&lt;img src="intro.png"&gt;&lt;br&gt;
  Address, Phone, .&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>