wordpress - 强制父 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

这适用于这些少数 CSS 更改(仅在 Chrome 中测试):

mosaic.css 第 46 行

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

mosaic.css 第 74 行

.mosaic-backdrop { position: absolute }

promotion.css 第 92 行

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

responsepress.css 第 155 行

.mosaic-backdrop img {float:left}

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