28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Après quelques recherches sur le web et ce forum, je reste bloqué devant un soucis de redimensionnement CSS d'images dans le contexte d'une mise en page responsive. Voici le problème :

La situation :

J'ai une galerie qui accueille des images horizontales et verticales qui ont toutes la même hauteur en px (et donc des largeurs différentes). Lorsqu'on est en mode "image agrandie", les images en horizontal prennent la largeur complète de la div qui les contient, et les images en vertical se positionnent au centre via un "margin:auto;".

Le problème :

Lorsque l'on change la taille de la fenêtre du navigateur, la div qui contient les images n'est retaillée que dans sa largeur jusqu'à temps qu'elle atteigne la largeur des images verticales. Jusqu'alors, les images verticales ne sont donc pas redimensionnées et on obtient une marge indésirable sous chaque image horizontale. Que faire pour que la hauteur des images verticales se calent à tout moment sur celles des horizontales ?

La démo :

Suivez ce lien et réduisez la fenêtre de navigateur puis passez à l'image suivante pour observer le problème : http://www.francoisdupont.fr/photo/book/mode_exterieur/1

Merci pour votre aide experte !
Modifié par scratch (12 Apr 2015 - 20:14)
C'est peut-être une fausse piste, mais je pensais essayer de trouver un moyen de lier la hauteur des images à la largeur de leur conteneur, mais je ne sais pas si c'est possible. Et si oui, je ne sais pas si on peut le faire autrement qu'en JS. Qu'en pensez vous ?
Modifié par scratch (16 Mar 2015 - 21:12)