Une galerie d’images au carré grâce aux CSS

Deux lignes de technique pour changer. Les galeries d’images miniatures ne sont pas toujours faciles à mettre en page à cause de l’alternance de photos en mode portrait et paysage. Voici quelques lignes de CSS qui permettent de les présenter automatiquement “au carré” sans modifier les fichiers des miniatures.

L’astuce consiste à insérer l’image miniature en tant qu’image de fond et à profiter des possibilités de centrage offertes en CSS par la fonction background-image.

L’image reste bien cliquable si vous voulez y mettre un lien hypertexte ou y raccorder une lightbox. Elle peut aussi être encadrée comme ici avec une simple bordure, ou agrémentée d’un cadre plus élaboré de votre composition, lui-même inséré en tant qu’image de fond derrière la photo.

Vous pouvez télécharger ce mini-exemple ici.