CSS Positionnement relatif-absolu provoque le conteneur d'avoir aucune hauteur

Question

Je veux créer un diaporama d'images qui sont contenues dans un <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> 

Vous pouvez voir que le balisage HTML et CSS est assez simple . Le problème que j'ai est que bien que toutes les images soient de la même taille, la taille n'est pas connue à l'avance. Je ne peux donc pas fixer une hauteur fixe sur le <ul> mais je dois vraiment - parce que les éléments positionnés absolus à l'intérieur de l'élément relatif relatif signifient que le conteneur a zéro hauteur et les images commencent à apparaître sur le contenu en dessous. J'utilise jQuery alors s'il vous plaît me guider vers une solution basée sur CSS et/ou jQuery. S'il vous plaît noter que j'ai déjà essayé:

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

mais, sur le document prêt, les images ne sont pas chargées et donc la hauteur est inconnue. J'ai également essayé d'ajouter un délai/attendre $("ul li:eq(0)").outerheight() > 0 mais cela donne des problèmes dans IE. IE renvoie souvent une valeur supérieure à zéro lorsqu'il a partiellement téléchargé l'image mais cette valeur est souvent inférieure à la hauteur réelle de l'image. Faites-moi savoir si vous avez besoin d'éclaircissements.

Answer 1

Je dirais que ce serait techniquement préférable de le faire à partir de l'angle opposé. Enlever l'affichage: aucun; à partir de votre CSS, puis obtenez la hauteur de la boîte lorsque la page se charge (de cette façon, sans javascript les gens peuvent toujours voir les images). Ensuite, définissez la propriété d'affichage de li à none via javascript.

Vous obtenez la taille et la même fonctionnalité!

Answer 2

Et en faisant cela?

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

Answer 3

Par exemple:

var width, height; 

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

de la Emprunte réponse à cette question Get the real width and height of an image with JavaScript? (in Safari/Chrome)