Bootstrap 5 Afbeelding

Aanbevolen cursussen:

Afbeeldingsvorm

Ronde hoeken .rounded

Voorbeeld

De klasse voegt ronde hoeken toe aan de afbeelding:

Probeer het zelf

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

Ronds .rounded-circle

Voorbeeld

De klasse maakt de afbeelding ronds

Probeer het zelf

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

Afsneden .img-thumbnail

Voorbeeld

De klasse maakt de afbeelding afgesneden (met randen):

Probeer het zelf

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

Om afbeeldingen uit te lijnen .float-start De klasse zal de afbeelding naar links floaten, of gebruik .float-end Rechts floaten：

Voorbeeld

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

Probeer het zelf

Centreren van afbeeldingen

Om de afbeelding centrair te plaatsen, hebben we utility-klasse toegevoegd aan de afbeelding .mx-auto (margin:auto) en .d-block (display:block)：

Voorbeeld

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

Probeer het zelf

Responsieve afbeeldingen

Afbeeldingen komen in verschillende formaten voor. Dit geldt ook voor schermen. Responsieve afbeeldingen passen zich automatisch aan de schermgrootte aan.

Door de .img-fluid Klasse toevoegen aan <img> Gebruik de tag om responsieve afbeeldingen te maken. Vervolgens zal de afbeelding goed schalen binnen het ouder-element.

.img-fluid De klasse wordt toegepast op afbeeldingen max-width: 100%; en height: auto; ：

Voorbeeld

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

Probeer het zelf