Bootstrap 4 Images
Bootstrap 4 formes d'image
Coins arrondis:
Cercle:
La vignette:
Coins arrondis
La .roundedclasse ajoute des coins arrondis à une image :
Exemple
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Cercle
La .rounded-circleclasse façonne l'image en cercle :
Exemple
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
La vignette
La .img-thumbnailclasse façonne l'image en vignette (encadrée):
Exemple
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Alignement des images
Faire flotter une image à droite avec la .float-rightclasse ou à gauche avec .float-left:
Exemple
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Image centrée
Centrez une image en ajoutant les classes utilitaires .mx-auto(margin:auto) et .d-block(display:block) à l'image :
Exemple
<img src="paris.jpg" class="mx-auto d-block">
Images réactives
Les images sont de toutes tailles. Les écrans aussi. Les images réactives s'ajustent automatiquement pour s'adapter à la taille de l'écran.
Créez des images réactives en ajoutant une .img-fluidclasse au <img>tag. L'image s'adaptera alors parfaitement à l'élément parent.
La .img-fluidclasse s'applique max-width: 100%;et
height: auto;à l'image :
Exemple
<img class="img-fluid" src="img_chania.jpg" alt="Chania">