Taille d'image inconnue et alignement vertical

Bonjour,

Un ami à moi voudrait réaliser un album photo, avec ces caractéristiques :

1. L'album doit être fluide, dans le sens où le nombre d'images en largeur change selon la taille de la fenêtre.
2. Il ne veut pas utiliser le javascript, php ou tout autre langage différent de html et css.
3. Il ne connaît pas la taille des images, mais elles seront toujours inférieures à 100px par 100px.
4. Il veut que chaque conteneur d'image fasse 100 pixels de haut et 100 pixels de large
5. Les images doivent être centrées verticalement et horizontalement dans leur conteneur respectif.

J'ai réalisé un exemple de ce qu'il veut, mais je n'arrive pas à centrer les images verticalement dans leur div.

Sans connaître la taille des images, c'est très difficile, voir impossible.

Vous savez si c'est réalisable en html et css, et compatible pour les navigateurs comme IE, Firefox, Safari etc. tout en respectant les points cités plus haut ?

Merci
Modifié par Tony Monast (02 Jan 2006 - 03:15)

Bonjour,

Cela s'obtient très simplement via display: table et display:table-cell qui permettent d'utiliser le vertical-align:middle du modèle des tableaux.

Pour IE, il faudra passer par une CSS spécifique et renoncer à cet alignement vertical. Ou l'obtenir via line-height:100px qui permet également d'utiliser le vertical-align, mais avec une déformation de la hauteur.

Pour conclure, la solution HTML CSS utilisable dans tous les navigateurs est plus simplement encore un tableau HTML.
Modifié par Laurent Denis (02 Jan 2006 - 03:45)

Merci Laurent.

J'ai plutôt du mal à faire fonctionner les table-cell et table, ca ne semble pas fonctionner à merveille.

Comme mon ami insiste pour le point numéro 1, la fluidité de la chose, il était hors de question d'utiliser un tableau.

Finalement, il a décidé d'utiliser un logiciel pour générer des thumbnails avec l'encadrement de 100 pixels autour de chaque image. Comme ca, ca fonctionne partout, les dimensions sont parfaites, les images sont centrées etc... Comme c'est automatisé, ca reste tout de même flexible.

C'est quand même bien.

Tony Monast a écrit :
Merci Laurent.

J'ai plutôt du mal à faire fonctionner les table-cell et table, ca ne semble pas fonctionner à merveille.

Curieux. C'est un vrai bonheur, d'habitude

Tony Monast a écrit :
Finalement, il a décidé d'utiliser un logiciel pour générer des thumbnails avec l'encadrement de 100 pixels autour de chaque image.

Sage décision. Comme quoi, les appli clients ne sont pas mortes