force LI pour redimensionner la largeur aux côtés de son contenue IMG

Question

Je construis une galerie de défilement horizontal qui ressemble à

<ul class='scroll'> 
<li class='img'> 
<img/> 
</li> 
</ul> 
<li class... 

Le CSS soutien ressemble à:

.img { 
float: left; 
display: inline; 
height:90%; 
width:auto; 
} 

.scroll { 
    display:block; 
    max-height:800px; 
    height:100% 
} 

.img img { 
    margin:5px 10px; 
    float:left; 
    max-height:100%; 
    height:auto; 
    width:auto; 
} 

Actuellement, il fonctionne très bien. Au chargement, les images sont redimensionnées et au maximum à 800px de hauteur. Cependant, ce qui me dérange vraiment, c'est quand je redimensionne une fenêtre à une taille plus petite (ou plus petite) li.img ne se redimensionne pas avec l'image, ce qui signifie qu'il reste de grandes bordures blanches ou des images superposées.

Si je sélectionne l'image avec INSPECT ELEMENT dans le chrome, tout se met en place comme par magie. Je me demandais s'il y avait une solution JQUERY qui oblige le navigateur à redessiner la balise LI sur le redimensionnement (comme l'ouverture inspecteur fait) ou d'autres façons de verrouiller le LI à la largeur IMG contenue?

Answer 1

Vous pouvez utiliser

$(window).resize(function(){ 
    ... 
}); 

et appeler une fonction qui calcule la hauteur.