Bootstrap 5.2 / Inhoud

Afbeeldingen

Documentatie en voorbeelden om afbeeldingen responsief gedrag te geven (zodat ze nooit breder worden dan hun bovenliggende element) en er lichte stijlen aan toe te voegen — allemaal via klassen.

Responsieve afbeeldingen

Afbeeldingen worden in Bootstrap responsief gemaakt met .img-fluid. Dit past max-width: 100%; en height: auto; toe op de afbeelding, zodat die meeschaalt met de breedte van het bovenliggende element.

HTML

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20250%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Responsive%20image%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EResponsive%20image%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="250" class="bd-placeholder-img-lg img-fluid" alt="Responsive image">

Afbeeldingsthumbnails

Naast onze border-radius-utilities kun je .img-thumbnail gebruiken om een afbeelding het uiterlijk van een afgeronde rand van 1px te geven.

HTML

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22200x200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2225%22%3E200x200%3C%2Ftext%3E%3C%2Fsvg%3E" width="200" height="200" class="img-thumbnail" alt="200x200">

Afbeeldingen uitlijnen

Lijn afbeeldingen uit met de float-hulpklassen of tekstuitlijningsklassen. Afbeeldingen op block-niveau kunnen worden gecentreerd met de margin-utility-klasse .mx-auto.

HTML

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22200x200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2225%22%3E200x200%3C%2Ftext%3E%3C%2Fsvg%3E" width="200" height="200" class="rounded float-start" alt="200x200">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22200x200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2225%22%3E200x200%3C%2Ftext%3E%3C%2Fsvg%3E" width="200" height="200" class="rounded float-end" alt="200x200">

HTML

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22200x200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2225%22%3E200x200%3C%2Ftext%3E%3C%2Fsvg%3E" width="200" height="200" class="rounded mx-auto d-block" alt="200x200">

HTML

<div class="text-center">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22200x200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2225%22%3E200x200%3C%2Ftext%3E%3C%2Fsvg%3E" width="200" height="200" class="rounded" alt="200x200">
</div>

Picture

Als je het <picture>-element gebruikt om meerdere <source>-elementen voor een specifieke <img> op te geven, zorg er dan voor dat je de .img-*-klassen aan de <img> toevoegt en niet aan de <picture>-tag.

HTML

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

Variabelen

Er zijn variabelen beschikbaar voor afbeeldingsthumbnails.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.