Redimensionner le groupe d'images pour l'adapter à l'intérieur du conteneur, toutes avec la même hauteur

Question

J'ai une exigence où il y aura une à quatre images dans un conteneur réglé à la largeur de la fenêtre.

Les images peuvent avoir différentes tailles.

En javascript, je dois redimensionner toutes les images tout en conservant le format d'image de sorte que toutes les images aient la même hauteur et qu'elles s'emboîtent toutes dans une rangée l'une à côté de l'autre dans la largeur de la fenêtre. Structure

html pourrait être le suivant: http://jsbin.com/uhonaz/2/

Merci

Answer 1

Cela peut être fait avec CSS comme ceci:

img{ 
    height:100%; 
    width:auto; 
} 

si vous voulez quatre images pour les adapter sur la même ligne, vous pouvez le faire:

img{ 
    height:100%; 
    max-width: 25%; 
    width: auto; 
} 

Pour une quantité indéterminée d'images, essayez JavaScript (J'utilise jQuery):

width = 100/$('img').length; 
$('img').css('max-width', width + '%');