Images Bootstrap 5

Cours optionnels

Recommandation de cours :

Forme de l'image .rounded

Exemple

La classe .rounded ajoute des arrondis à l'image :

Essayer par vous-même

<img src="flower.jpg" class="rounded" alt="Flower">

Cercle .rounded-circle

Exemple

La classe .rounded-circle forme l'image en cercle :

Essayer par vous-même

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

Miniature .img-thumbnail

Exemple

La classe .img-thumbnail forme l'image en miniature (avec bordure) :

Essayer par vous-même

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

Aligner l'image .float-start La classe .float-end fait flotter l'image à gauche, ou utilisez .float-end Flottant à droite :

Exemple

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

Essayer par vous-même

Image centrée

Pour centrer l'image, nous avons ajouté la classe utility à l'image. .mx-auto (margin:auto) et .d-block (display:block) :

Exemple

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

Essayer par vous-même

Images responsives

Les images ont diverses tailles. L'écran en est ainsi. Les images responsives s'ajusteront automatiquement pour s'adapter à la taille de l'écran.

En utilisant .img-fluid Ajouter une classe à <img> Utilisez l'étiquette pour créer des images responsives. Ensuite, l'image s'adaptera bien à l'élément parent.

.img-fluid Appliquer la classe à l'image max-width: 100%; et height: auto; ：

Exemple

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Essayer par vous-même