CSS相對絕對定位導致容器沒有高度

Question

我希望創建一個包含在<ul>圖像的幻燈片：

<ul> 
    <li><a href="images/01/large.jpg"><img src="images/01/default.jpg"></a></li> 
    <li><a href="images/02/large.jpg"><img src="images/02/default.jpg"></a></li> 
    <li><a href="images/03/large.jpg"><img src="images/03/default.jpg"></a></li> 
    <li><a href="images/04/large.jpg"><img src="images/04/default.jpg"></a></li> 
    <li><a href="images/05/large.jpg"><img src="images/05/default.jpg"></a></li> 
    <li><a href="images/06/large.jpg"><img src="images/06/default.jpg"></a></li> 
    <li><a href="images/07/large.jpg"><img src="images/07/default.jpg"></a></li> 
    <li><a href="images/08/large.jpg"><img src="images/08/default.jpg"></a></li> 
    <li><a href="images/09/large.jpg"><img src="images/09/default.jpg"></a></li> 
    <li><a href="images/10/large.jpg"><img src="images/10/default.jpg"></a></li> 
    <li><a href="images/11/large.jpg"><img src="images/11/default.jpg"></a></li> 
    <li><a href="images/12/large.jpg"><img src="images/12/default.jpg"></a></li> 
    <li><a href="images/13/large.jpg"><img src="images/13/default.jpg"></a></li> 
</ul> 
<style> 
    ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     position: relative; 
    } 
    li { 
     display: none; 
     list-style-type:none; 
     margin:0; 
     padding:0; 
     position: absolute; 
    } 
</style> 

你可以看到的HTML標記和CSS是相當直截了當。我遇到的問題是，儘管所有圖像的大小相同，但大小並不是預先知道的。因此，我無法在<ul>上設置固定高度，但我確實必須 - 因爲相對定位元素中的絕對定位元素意味着容器的高度爲零，圖像開始出現在其下方的內容上。

我正在使用jQuery，所以請指導我使用基於CSS和/或jQuery的解決方案。 請注意是我以前已經嘗試過：

$("ul").height(
    $("ul li:eq(0)").outerheight() 
) 

但是，在文件準備好，圖像不加載，因此高度未知。我也嘗試添加延遲/等待$("ul li:eq(0)").outerheight() > 0，但這給IE中的問題。 IE在部分下載圖像時通常會返回大於零的值，但如果該值通常低於實際圖像高度，則會返回該值。讓我知道你是否需要任何澄清。

Answer 1

我會說這將會是技術上更好地從對立的角度做到這一點。刪除顯示：無;從你的CSS，然後獲取頁面加載時框的高度（這樣，沒有JavaScript的人仍然可以看到圖像）。然後，通過javascript將li的display屬性設置爲none。

您將獲得高度和相同的功能！

Answer 2

通過這樣做？

$("ul").css({ 
    height: $("ul li:eq(0)").find("img").outerheight() 
}); 

Answer 3

例如：

var width, height; 

$('ul img').load(function() { 
    width = this.width; 
    height = this.height; 
}); 

從借力回答這個問題Get the real width and height of an image with JavaScript? (in Safari/Chrome)