Nous allons voir dans cette leçon les différentes classes offertes par Bootstrap 5 pour bien gérer les images.
Les classes Bootstrap pour les images :
- rounded
- rounded-circle
- img-thumbnail
- img-fluid
- float-start
- float-end
- d-block
- mx-auto
Comment intégrer une image avec Bootstrap 5
L’intégration d’une image avec Bootstrap 5 se fait de la même manière qu’avec du HTML classique. On utilise l’élément <img> avec les attributs src= »*« et alt= »*« .
<img src= »https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg« alt= »new-york« >
Exemple :
Changer la taille d’une image
Là aussi pas de différence avec le HTML classique, vous pouvez utiliser au choix :
Les attributs width et height :
<img src= »https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg » alt= »new-york » width= »328 » height= »168« >
L’attribut style :
<img src= »https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg » alt= »new-york » style= »width:328px;height:168px« >
Changer la forme d’une image avec Bootstrap 5
3 classes sont disponibles pour changer la forme d’une image avec Bootstrap 5.
- La classe rounded va arrondir les 4 coins de l’image.
- La classe rounded-circle va transformer l’image en une
- La classe img-thumbnail va ajouter une bordure de 1px à l’image.
Créer des images responsives
Pour créer des images qui s’adaptent à la taille d’écran de vos lecteurs, nous allons utiliser la classe img-fluid.
La classe img-fluid a pour style css max-width:100% et height: auto.
Aligner les images avec Bootstrap 5
Bootstrap 5 a créé des classes spécifiques pour centrer ou aligner à droite ou à gauche les images.
- float-start : Pour aligner les images à gauche (positionnement par défaut).
- float-end : Pour aligner les images à droite.
Pour centrer les images, nous avons plusieurs possibilités.
- La première et d’appliquer à l’élément parent la classe text-center.
<div class= »col text-center »>
<img src= »https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg » alt= »new-york » style= »width:200px;height:100px » class= »rounded img-fluid »>
La seconde manière de faire et de transformer notre image en élément de style « block« avec la classe d-block et ajouter les marges automatiques avec la classe mx-auto.
Vous pouvez voir un autre exemple de transformation d’élément inline en élément block dans la leçon : créer des boutons avec Bootstrap 5 au chapitre Placer des groupes de boutons côte à côte.
