Question

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 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 🙂

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

My goal is to replicate how the images are perfectly responsive on this page, but with the addition of the rollover mosaic text: http://bit.ly/LIrJv7

<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>

Answer 1

This is working with these few CSS changes (tested in Chrome only):

mosaic.css line 46

.mosaic-block-three {height: 250px}

mosaic.css line 74

.mosaic-backdrop {position: absolute}

promotion.css line 92

.details {margin: 15px 20px; margin: 0 20px;}

responsepress.css line 155

.mosaic-backdrop img {float:left}

You might want to move the border-radius:5px to the img now also.