CSS Galerie d'Images
Galerie d'Images CSS
Une galerie d'images CSS est une collection d'images affichée de manière organisée et souvent réactive sur une page web.
Ici, nous utilisons CSS pour créer une galerie d'images :
Cinque Terre
Forêt Verte
Aurores Boréales
Montagnes
La structure HTML d'une galerie d'images est la suivante :
- Un élément conteneur pour envelopper l'ensemble de la galerie (comme un <div> avec class="gallery").
- Un autre élément conteneur pour chaque image (comme un <div> avec class="gallery-item"), qui contient la balise <img> et éventuellement une description.
Voici le code HTML et CSS :
Exemple
<html>
<head>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Forêt Verte</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Aurores Boréales</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Montagnes</div>
</div>
</div>
</body>
</html> Astuce : Nous avons utilisé display: flex; pour la galerie d'images ci-dessus. Ce module de mise en page est efficace pour organiser les images en rangées ou en colonnes. Vous en apprendrez plus sur CSS Flexbox plus tard dans notre tutoriel CSS.
Galerie d'Images CSS Réactive
Ici, nous utilisons des requêtes média CSS pour réorganiser les images sur différentes tailles d'écran :
- Si l'écran est plus large que 768px, afficher quatre images côte à côte.
- Si l'écran est plus petit que 768px, afficher deux images côte à côte.
- Si l'écran est plus petit que 480px, empiler les images verticalement (largeur : 100%).
Astuce : Vous en apprendrez plus sur les requêtes média plus tard dans notre tutoriel CSS.
Exemple
