Force Parent Div To Inherit Child Image Height (For Responsive Scaling Images)
I'm trying to make the parent div inherit the height that the responsive child image sets... but it's not working.

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.

If I set the .mosaic-block-three element to height: auto, then it fails completely and goes down to 0 height.

What am I missing to make this scale smoothly? I can rearrange css or html as needed. I've tried for hours so any help is GREATLY appreciated :-)

The example page is here: http://bit.ly/KzfN2g

    <div class="mosaic-block-three magnifier2">
         <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; "> </a>
         <div class="details"> 
  
            <a class="pf_title_link" href="/portfolio/vignette-tiered-architella-shades/">Vignette® Tiered™ Architella® Shades  </a> </div>

            <div class="mosaic-backdrop" style="display: block; ">
            <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"> 
            </div>
              <!-- end mosaic-backdrop --> 
              
         </div>
Force Parent Div To Inherit Child Image Height (For Responsive Scaling Images)
===

I'm trying to make the parent div inherit the height that the responsive child image sets... but it's not working.

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.

If I set the .mosaic-block-three element to height: auto, then it fails completely and goes down to 0 height.

What am I missing to make this scale smoothly? I can rearrange css or html as needed. I've tried for hours so any help is GREATLY appreciated :-)

The example page is here: http://bit.ly/KzfN2g

    <div class="mosaic-block-three magnifier2">
         <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; "> </a>
         <div class="details"> 
  
            <a class="pf_title_link" href="/portfolio/vignette-tiered-architella-shades/">Vignette® Tiered™ Architella® Shades  </a> </div>

            <div class="mosaic-backdrop" style="display: block; ">
            <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"> 
            </div>
              <!-- end mosaic-backdrop --> 
              
         </div>