Maison >interface Web >Tutoriel d'amorçage >Comment définir la forme de l'image dans bootstrap4

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

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼original
2019-07-17 16:26:252537parcourir

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">

Comment définir la forme de limage dans bootstrap4

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">

Comment définir la forme de limage dans bootstrap4

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">

Comment définir la forme de limage dans bootstrap4

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" >

Comment définir la forme de limage 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 Comment définir la forme de l'image dans bootstrap4

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

Instance

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

Comment définir la forme de limage dans bootstrap4

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn