Suggestions pour une galerie d'images responsive/fluide

Bonjour / Bonsoir,

Étant en train de mettre au point une galerie d'images de ce type pour mon portfolio, je me pose quelques questions quant à la manière de le rendre le plus responsible, et avec le moins de JS possible.

Comme vous le voyez (peut être selon votre résolution...) dans mon exemple, la div (image) de droite vient vite à la ligne quand on rétrécie la fenêtre du navigateur et laisse un grand blanc à sa place. J'ai pensé modifier tout ça avec des media queries pour palier au problème, mais cela voudrait dire mettre des media queries quasiment tout les 20px pour avoir un résultat parfait ...

J'ai lu quelques pages sur la fameuse astuce du max-width:100% pour rendre les images fluides, mais je suis pas sûr que dans mon cas ce soit possible, vu que le parent est en inline-block.

Quelles solutions (si vous en avez (ce que j'espère ))me suggérez vous ? Merci d'avance !

Edit : J'ai trouvé ce tuto qui a l'air intéressant, mais je n'arrive pas à le mettre en application : http://codepen.io/Osef/pen/qCxsK
Modifié par osef_ (15 Aug 2013 - 02:08)

salut,
bin si tu veux du responsif, je ne vois pas trop de solutions autres que les medias queries. T'as posé des styles CSS qui ne permettent pas à ma connaissance de faire grand chose pour avoir ce que tu cherches (à part tricher et mettre un "text-align:right" sur ton #viewer mais ça ne sera pas centré).
Je ne vois pas non plus pourquoi mettre des mq tout les 20 px ? Tu prends les principales résolutions, tu calcules la largeur de ton #viewer pour contenir les images sans faire de blancs et ça marche nickel.
Tu n'auras pas besoin de ton "width:71%" mais en gardant cette contrainte ça donnerait genre ça

@media screen and (max-width:800px) {#viewer {width:245px;}}
@media screen and (min-width:800px) {#viewer {width:485px;}}
@media screen and (min-width:1024px) {#viewer {width:715px;}}
@media screen and (min-width:1366px) {#viewer {width:950px;}}

Je travaille avec une résolution de 1440x900, si tu as plus tu adaptes et tu vois.