Formes d'images Bootstrap4

Image arrondie

.roundedLa classe peut faire en sorte que les images affichent des effets de coins arrondis :

Exemple

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Essayez-le vous-même »

Image elliptique

.rounded-circleLa classe peut définir des images elliptiques :

Exemple

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Essayez-le vous-même »

Miniature

.img-thumbnailLa classe est utilisée pour définir des miniatures d'images (les images ont des bordures) :

Exemple

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Essayez-le vous-même »

Alignement des images

Utilisez la.float-rightclasse pour aligner les images à droite, utilisez la.float-leftclasse pour aligner les images à gauche :

Exemple

<img src="paris.jpg" class="float-left"> <img src="cinqueterre.jpg" class="float-right">

Essayez-le vous-même »

Image centrée

Utilisez.mx-auto (margin:auto)et .d-block (display:block)classe pour définir l'alignement centré de l'image :

Exemple

<img src="paris.jpg" class="mx-auto d-block">

Essayez-le vous-même »

Image responsive

Les images ont différentes tailles, et nous devons nous adapter automatiquement à la taille de l'écran.

Nous pouvons faire cela en ajoutant<img>balise, ajoutez.img-fluidclasse pour définir des images responsives.

.img-fluidLa classe définitmax-width: 100%; 、 height: auto; :

Exemple

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

Essayez-le vous-même »
Autres extensions