Bootstrap 5 bilder

Kursrekommendationer:

Bildform

Runda hörn .rounded

Exempel

Klassen lägger till rundade hörn på bilden:

Prova själv

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

Cirkel .rounded-circle

Exempel

Klassen formar bilden till en cirkel:

Prova själv

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

Miniatyr .img-thumbnail

Exempel

Klassen formar bilden till en miniatyr (med ram):

Prova själv

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

För att justera bilden .float-start Klassen flyttar bilden till vänster, eller använd .float-end Högerflytande:

Exempel

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

Prova själv

Centrera bild

För att centrera bilden, lägger vi till utility-klassen till bilden .mx-auto (margin:auto) och .d-block (display:block)：

Exempel

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

Prova själv

Responsiva bilder

Bilden finns i olika storlekar. Skärmen är också så. Responsiva bilder justerar sig automatiskt efter skärmstorleken.

Genom att använda .img-fluid Lägg till klassen <img> Använd taggen för att skapa responsiva bilder. Då kommer bilden att justera sig bra inom föräldrelementet.

.img-fluid Använd klassen för att applicera bild max-width: 100%; och height: auto; ：

Exempel

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

Prova själv