title: Keep div height while the image is loading
body: <p>I have a square image within <code>.img-container</code>. Sometimes it takes a few seconds for an image to load and the <code>.img-container</code> collapses and only takes the full height when the image loads. However, I would like it to keep the full height (as if the image is there) while the image is loading.</p>
  
  <p>I would've easily done this by setting a <code>min-height</code> on <code>img-container</code> class, however it's a fluid grid and the image is responsive (notice bootstrap's <code>img-responsive</code> helper class) which makes it hard to set the min-height to an appropriate value for different screen sizes (although achievable with media queries as a last resort).
  Solving this by putting a placeholding image sounds like an overkill (especially performance wise on mobile). Also, not sure what would load first then, the placeholder image or the actual image.</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
      &lt;div class="card"&gt;
        &lt;span class="img-container thumbnail clearfix"&gt;
          &lt;img alt class="pull-left img-responsive" src="http://..."&gt;
        &lt;/span&gt;
        &lt;div class="caption"&gt;
          &lt;a href="http://.." class="card-title lead"&gt;
            Some text
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>