根據絕對定位的孩子的身高設置DIV高度IMG

我有一個相對定位的div，裏面有許多絕對定位的圖像。 div和圖像都設置爲100％的寬度來填充佈局（這是流體），但我需要能夠設置父DIV的高度，以便它將顯示整個圖像。根據絕對定位的孩子的身高設置DIV高度IMG

我試圖接近類似CSS - relative positioned parent div not stretching to absolute child div height和Resize parent div to match absolutly positioned child div height，但孩子圖像的高度是回報爲0

我甚至試過clearfixes，即使我不使用浮動。這些圖像需要絕對定位，所以我無法使用浮動來解析。

任何想法？

http://jsfiddle.net/sdowswell/XmVu7/1/

HTML

<div id="banner"> 
    <a href="newpage.html"><img src="images/banners/image1.jpg" /></a> 
    <a href="othernewpage.html"><img src="images/banners/image2.jpg" /></a> 
</div>

CSS

#banner { 
    width:100%; 
    position:relative; 
} 

#banner>a>img { 
    width:100%; 
}

JQUERY

$(document).ready(function(){ 

     $('#banner').css('overflow', 'hidden'); 
     $('#banner img') 
      .css('position', 'absolute') 
      .css('display', 'none'); 
    $('#banner img').first().css('display', 'block'); 
});

（編輯刪除不相關的額外的東西。再次Editted包括jQuery的。）

來源

2012-08-15 sdowswell

您是否嘗試找到''標籤的高度？ – Fewfre 2012-08-15 18:02:37

請編輯重現您的問題 - http://jsfiddle.net/L9Cqg/ – 2012-08-15 18:05:48

您在HTML中使用'id =「container」'，但在CSS中使用'＃banner'。我是否應該假設都提到相同的ID？ – depa 2012-08-15 18:23:39

我能夠通過設置#banner高度找到一個解決方案後的第一個圖像已完成加載

$(window).load(function() { 
    $('#banner').css('height', $('#banner img:first').css('height')) 
});

（用於window.load確保Chrome的從充分收集信息加載圖片）

這並不理想，但它現在正在訣竅中。

來源

2012-08-15 20:16:12 sdowswell

根據絕對定位的孩子的身高設置DIV高度IMG

回答

相關問題