Comment définir la forme de l'image dans bootstrap4

Image à coins arrondis

. La classe arrondie peut donner à l'image un effet de coin arrondi :

Exemple

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

Image d'ellipse

.La classe de cercle arrondi peut définir une image elliptique :

Exemple

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

Recommandations associées : "Tutoriel de mise en route Bootstrap"

La classe Thumbnail

.img-thumbnail est utilisée pour définir les vignettes des images (les images ont des bordures) :

Instance

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

Alignement de l'image

Utilisez la classe .float-right pour définir l'alignement à droite de l'image et utilisez la classe .float-left pour définir l'alignement à gauche de l'image :

Exemples

<img  src="paris.jpg" class="float-left" alt="Comment définir la forme de l'image dans bootstrap4" > <img  src="cinqueterre.jpg" class="float-right" alt="Comment définir la forme de l'image dans bootstrap4" >

Images responsives

Les images sont disponibles dans une variété de tailles, nous devons nous adapter automatiquement en fonction de la taille de l'écran.

Nous pouvons configurer des images réactives en ajoutant la classe .img-fluid dans la balise

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

Instance

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!