Galerie d’images CSS
Les menus déroulants imbriquent des menus sous des liens. Une galerie d’images est un autre composant : une grille calme de miniatures que l’on parcourt du regard. Uniformisez la taille des vignettes, laissez la rangée passer à la ligne, recadrez avec object-fit, et laissez les grilles responsives avancées aux modules Flexbox et Grid suivants.
Boîte à outils de la galerie
📊 Galerie d’images en un coup d’œil
| Élément | Rôle quotidien |
|---|---|
| Liste galerie | Conteneur qui dispose les vignettes en rangée qui passe à la ligne ou en grille |
| Taille de vignette | Largeur/hauteur partagées pour un ensemble homogène |
object-fit: cover |
Remplit la boîte sans étirement disgracieux |
| Gap / margin | Espace respirable entre les images |
| Indice hover | Retour léger sans faire sauter la mise en page |
| Légende | Optionnelle avec figure/figcaption pour le sens |
Utilisez de vrais éléments <img> avec un alt utile. Les sprites purement décoratifs vont ailleurs — les galeries sont souvent du contenu.
Galerie flex avec wrap
Un conteneur flex avec wrap transforme une liste de vignettes en rangée responsive qui passe à la ligne suivante. Gap garde l’espacement honnête.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
Boîte de vignette partagée + cover
Donnez à chaque image la même boîte, puis recadrez avec cover pour que portraits et paysages partagent un rythme.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figures et légendes
Quand le libellé compte, enveloppez l’image dans figure et ajoutez figcaption. Gardez le texte de légende court sous la vignette.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
Retour hover doux
Atténuez ou éclaircissez un peu au survol. Évitez les grandes transformations d’échelle qui poussent les voisins, sauf si vous planifiez l’empilement avec soin.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
Une habitude de galerie calme
Boîtes de vignettes égales, wrap + gap, object-fit: cover, alt significatif. Préférez les leçons Flex/Grid suivantes pour le masonry responsive avancé — ne confondez pas ceci avec les menus déroulants.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
À vous de jouer
- Construisez une liste
.galleryflex wrap d’images liées. - Définissez largeur/hauteur partagées et
object-fit: cover. - Ajoutez
figure/figcaptionsur un élément. - Stylez un hover doux (opacité ou contour).
- Écrivez une phrase : que Grid enseignera-t-il mieux que ce croquis avec wrap ?
Erreurs fréquentes
- Mélanger des hauteurs aléatoires sans boîte partagée ni object-fit
- Gap à zéro pour coller les vignettes
- Traiter les galeries comme des menus déroulants imbriqués
- Positionner absolute chaque vignette en pile fragile
altvide sur des photos significatives
Résumé
- Les galeries sont des ensembles de miniatures égales qui passent à la ligne
- Taille partagée +
object-fit: covergarde le rythme soigné - Flex wrap + gap est une mise en page de départ calme
- Légendes et indices hover restent optionnels et légers
- Les modules Flexbox/Grid approfondissent les galeries responsives ensuite
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut