强制父 Div 继承子图像高度（用于响应缩放图像）

Question

我正在尝试让父 div 继承响应式子图像设置的高度...但它不起作用。

这适用于响应式网站，因此在调整浏览器大小时，图像会调整大小。问题是，如果我在父 .​​mosaic-block-three 元素上设置高度，则图像似乎会固定在该高度。

如果我将 .mosaic-block-three 元素设置为 height: auto，那么它会完全失败并降至 0 高度。

我缺少什么才能使这个比例顺利进行？我可以重新排列和添加 css、html 或 javascript，无论我必须做什么来完成它。我已经尝试了几个小时，因此非常感谢您的帮助:-)

示例页面在这里：http://bit.ly/KzfN2g

我的目标是复制图像在此页面上的完美响应方式，但添加了翻转马赛克文本：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

您可能应该使用 img 标签而不是背景。然后设置该图像的最大宽度。不要在父元素上设置宽度/高度。

应该可以！

Answer 2

这适用于这些 CSS 更改（仅在 Chrome 中测试）：

mosaic.css 第 46 行

.mosaic-block-three {高度：250px}

mosaic.css 第 74 行

.mosaic-backdrop {位置：绝对}

promotion.css 第 92 行

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

responsepress.css 第 155 行

.mosaic-backdrop img {float:left}

您现在可能还想将 border-radius:5px 移动到 img。