Images
jdb-image
Images
JdB.CSS propose plusieurs classes pour styliser vos images : arrondissement, bordures, ombres, positionnement et plus encore. Toutes les images peuvent être rendues responsive avec la classe jdb-image.
Image de base
Une image simple sans style particulier. Ajoutez la classe jdb-image pour qu'elle s'adapte automatiquement à la largeur de son conteneur (max-width: 100%).
<img src="/arbre-au-centre-de-la-foret.jpg" alt="Image de base" style="width:300px">
Image responsive
La classe jdb-image rend l'image responsive. Elle s'adaptera automatiquement à la largeur de son conteneur sans jamais le dépasser.
<img src="/arbre-au-centre-de-la-foret.jpg" alt="Image responsive" class="jdb-image">
Images arrondies
Utilisez les classes jdb-round-sm, jdb-round, jdb-round-lg, jdb-round-xl et jdb-round-xxl pour arrondir les coins d'une image. La classe jdb-circle transforme l'image en cercle parfait (uniquement si l'image est carré).
jdb-round-sm
jdb-round
jdb-round-lg
jdb-round-xl
jdb-round-xxl
jdb-circle
<img src="/image.jpg" class="jdb-image jdb-round-sm">
<img src="/image.jpg" class="jdb-image jdb-round">
<img src="/image.jpg" class="jdb-image jdb-round-lg">
<img src="/image.jpg" class="jdb-image jdb-round-xl">
<img src="/image.jpg" class="jdb-image jdb-round-xxl">
<img src="/image.jpg" class="jdb-image jdb-circle"
style="max-width:150px; aspect-ratio:1/1;">Images avec bordures
Ajoutez une bordure à vos images avec la classe jdb-border. Vous pouvez également colorer la bordure avec les classes de couleurs comme jdb-border-blue, jdb-border-red, etc.
jdb-border
jdb-border-blue
jdb-border-red jdb-round-lg
jdb-border-green jdb-circle
<img src="/arbre-au-centre-de-la-foret.jpg" class="jdb-image jdb-border"> <img src="/arbre-au-centre-de-la-foret.jpg" class="jdb-image jdb-border jdb-border-w2"> <img src="/arbre-au-centre-de-la-foret.jpg" class="jdb-image jdb-border jdb-border-blue"> <img src="/arbre-au-centre-de-la-foret.jpg" class="jdb-image jdb-border jdb-border-red jdb-round"> <img src="/arbre-au-centre-de-la-foret.jpg" class="jdb-image jdb-border jdb-border-green jdb-circle" style="max-width:150px; aspect-ratio:1/1;">
Positionnement avec jdb-display-*
Les classes jdb-display-* permettent de positionner des éléments par-dessus des images. Utilisez jdb-display-container sur le conteneur parent, puis positionnez vos éléments avec jdb-display-topleft, jdb-display-topright, jdb-display-bottomleft, jdb-display-bottomright, jdb-display-middle, etc.
Les classes jdb-display-* est aussi parfait pour créer des bannières, des en-têtes avec texte superposé ou des tags sur les images ou les blocs.
<div class="jdb-display-container"> <img src="/arbre-au-centre-de-la-foret.jpg" class="jdb-image"> <div class="jdb-display-topleft jdb-padding jdb-black">Top Left</div> <div class="jdb-display-topright jdb-padding jdb-red">Top Right</div> <div class="jdb-display-bottomleft jdb-padding jdb-blue">Bottom Left</div> <div class="jdb-display-bottomright jdb-padding jdb-green">Bottom Right</div> <div class="jdb-display-middle jdb-large jdb-white jdb-padding">Middle</div> </div>
Image avec bouton en superposition
Un exemple pratique : ajouter un bouton de fermeture ou d'action sur une image.
<div class="jdb-display-container jdb-card-4"> <img src="/arbre-au-centre-de-la-foret.jpg" class="jdb-image"> <button class="jdb-button jdb-display-topright jdb-red">✕</button> </div>
Pour découvrir tous les effets visuels applicables aux images (opacité, grayscale, sepia, blur, hover, etc.), consultez le chapitre sur les effets.
Bonnes pratiques : Ajoutez toujours un attribut alt descriptif à vos images pour l'accessibilité. Utilisez loading="lazy" pour améliorer les performances de chargement de la page.