Bootstrap 4 dispose de class pour jouer sur la forme des images mais aussi leur adaptabilité en fonction de l'écran.
Pour rendre une image extensible et qu'elle s'adapte à son élément parent, nous allons utiliser la class .img-fluid.
<img class="img-fluid" src="chemin_de_l_image" alt="Image fluide" />
Cette class (.img-fluid) applique une largeur maximale de 100% et une hauteur automatique (max-width : 100%; height : auto).
La class rounded : cette class arrondit légèrement les bordures de l'image
<img class="rounded" src="chemin_de_l_image" alt="Image" />
La class rounded-circle : Cette class arrondit l'image jusqu'à former un cercle
<img class="rounded-circle" src="chemin_de_l_image" alt="Image" />
La class .img-thumbnail : Cette class applique une sorte de bordure afin de rendre l'image comme une vignette
<img class="img-thumbnail" src="chemin_de_l_image" alt="Image" />
Les class .float-left et .float-right permettent respectivement d'aligner les images à l'extrémité gauche et à l'extrémité droite :
<img class="float-left" src="chemin_de_l_image" alt="Image" />
<img class="float-right" src="chemin_de_l_image" alt="Image" />
Les class .mx-auto et .d-block permettent de centrer une image :
<img class="mx-auto d-block" src="chemin_de_l_image" alt="Image" />
Copyright © 2010-2019 Lookman Design, tous droits réservés .