title: Force Parent Div To Inherit Child Image Height (For Responsive Scaling Images)
body: <p>I'm trying to make the parent div inherit the height that the responsive child image sets... but it's not working.</p>
  
  <p>This is for a responsive website, so when resizing the browser, the image resizes. The problem is that if I set a height on the parent .mosaic-block-three element, then the image appears to stay fixed at that height.</p>
  
  <p>If I set the .mosaic-block-three element to height: auto, then it fails completely and goes down to 0 height.</p>
  
  <p>What am I missing to make this scale smoothly? I can rearrange and add css, html or javascript, whatever I have to do to get it done. I've tried for hours so any help is GREATLY appreciated :-)</p>
  
  <p>The example page is here: <a href="http://bit.ly/KzfN2g" rel="nofollow">http://bit.ly/KzfN2g</a></p>
  
  <p>My goal is to replicate how the images are perfectly responsive on this page, but with the addition of the rollover mosaic text: <a href="http://bit.ly/LIrJv7" rel="nofollow">http://bit.ly/LIrJv7</a></p>
  
  <pre><code>&lt;div class="mosaic-block-three magnifier2"&gt;
       &lt;a href="/wp-content/uploads/2012/05/home-office-vignette-tiered-architella-shades-01.png" class="mosaic-overlay fancybox" rel="gallery" style="display: inline; opacity: 0; "&gt; &lt;/a&gt;
       &lt;div class="details"&gt; 
  
          &lt;a class="pf_title_link" href="/portfolio/vignette-tiered-architella-shades/"&gt;Vignette® Tiered™ Architella® Shades  &lt;/a&gt; &lt;/div&gt;
  
          &lt;div class="mosaic-backdrop" style="display: block; "&gt;
          &lt;img src="/wp-content/uploads/2012/05/home-office-vignette-tiered-architella-shades-01-1024x564.png" class="attachment-large wp-post-image" alt="home-office-vignette-tiered-architella-shades-01" title="home-office-vignette-tiered-architella-shades-01"&gt; 
          &lt;/div&gt;
            &lt;!-- end mosaic-backdrop --&gt; 
  
       &lt;/div&gt;
  </code></pre>