0

我试图让父 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>
4

2 回答 2

1

这适用于以下几个 CSS 更改（仅在 Chrome 中测试）：

马赛克.css 第 46 行

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

马赛克.css 第 74 行

.mosaic-backdrop {位置：绝对}

Promotion.css 第 92 行

.details {边距：15px 20px; 边距：0 20px;}

responsepress.css 第 155 行

.mosaic-backdrop img {float:left}

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

于 2012-05-31T23:28:06.953 回答
0

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

那应该工作！

于 2012-05-31T09:28:53.853 回答