Question

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

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

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

为了使这个规模顺利，我错过了什么？我可以重新排列并添加css，html或javascript，无论我必须做什么来完成它。我已经尝试了几个小时，所以任何帮助都非常感激： - ）

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

Answer 2

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

这应该有用！

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

2 个答案: