強制父div繼承兒童圖像高度（用於響應式縮放圖像）

我試圖讓父div繼承響應子圖像設置的高度......但它不工作。強制父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>

來源

2012-05-31 Rob Vanders

這正與這幾個CSS變化（在Chrome只測試）：

mosaic.css線46

.mosaic塊三{ ~~高度：250像素~~ }

mosaic.css線74

.mosaic-背景{ ~~位置：絕對~~ }

promotion.css線92

.details { ~~餘量：15像素20像素;~~ 保證金：0 20px的;}

responsepress.css線155

.mosaic-背景IMG {浮動：左}

你可能要移動到border-radius:5px img現在也是。

來源

2012-05-31 23:28:06 tobyj

謝謝!!!!!!! **它完美的工作！**你爲我節省了很多時間！我從字面上幾個小時試過都沒有用，但我知道這只是對css代碼的簡單改動。謝謝！！我會投票，但我沒有足夠的「聲譽」。 :-)：D :-D –

P.S. .mosaic-backdrop img {float：left}是做什麼的？它看起來不會影響顯示。我很好奇，因爲我想真正掌握CSS。（通過這種方式瞭解任何優秀的教程資源？你似乎知道你在說什麼！） –

您應該使用img標記而不是背景。然後設置該圖像的最大寬度。不要在父元素上設置寬度/高度。

這應該工作！

來源

2012-05-31 09:28:53

嘿，謝謝你的回覆。當你說「使用圖片標籤而不是背景」時，你能澄清你指的是哪一個元素嗎？目前，圖像被設置爲標籤，並且沒有設置背景。現在圖像完全響應，但是。馬賽克背景不是 - 這就是我想要與調整大小鎖定。 –

在標籤中，您應該放入img src而不是將圖像作爲背景。然後設置圖像的寬度。（百分比）。不要在父div上設置寬度。 –

強制父div繼承兒童圖像高度（用於響應式縮放圖像）

回答

相關問題