Bootstrap 5 Billeder

Kursusanbefalinger:

Billedform

Runde kanter .rounded

Eksempel

klassen tilføjer runde kanter til billedet:

Prøv det selv

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

Cirkulært .rounded-circle

Eksempel

klassen former billedet til cirkulært:

Prøv det selv

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

Miniatyr .img-thumbnail

Eksempel

klassen former billedet til en miniature (med kant):

Prøv det selv

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

for at justere billedet .float-start klassen flytter billedet til venstre, eller brug .float-end Højre flydende:

Eksempel

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

Prøv det selv

Centreret billede

For at centere billedet tilføjer vi utility klassen til billedet .mx-auto (margin:auto) og .d-block (display:block)：

Eksempel

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

Prøv det selv

Responsivt billede

billeder har forskellige størrelser. Skærmen er også det samme. Responsivt billede justerer automatisk sig til skærmstørrelsen.

ved at .img-fluid klassen tilføjes <img> etiketten til at oprette responsivt billede. Derefter vil billedet tilpasse sig godt til parentelementet.

.img-fluid klassen anvendes til billeder max-width: 100%; og height: auto; ：

Eksempel

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

Prøv det selv