Formes d'images Bootstrap5

Bootstrap 5 fournit de nombreuses classes pour vous aider à ajuster et optimiser rapidement l'apparence des images, en particulier en contrôlant la forme, la taille et la mise en page adaptative des images.

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 ovale

.rounded-circleLa classe peut créer des images ovales :

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 classe.float-startpour aligner les images à gauche, utilisez la classe.float-endpour aligner les images à droite :

Exemple

<img src="paris.jpg" class="float-start"> <img src="cinqueterre.jpg" class="float-end">

Essayez-le vous-même »

Image centrée

Utilisez les classes.mx-auto (margin:auto)et .d-block (display:block)pour centrer les images :

Exemple

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

Essayez-le vous-même »

Image responsive

Les images existent en différentes tailles, et nous devons nous adapter automatiquement en fonction de la taille de l'écran.

Nous pouvons ajouter la classe<img>à la balise.img-fluidpour 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