in English

Afbeeldingen

Documentatie en voorbeelden voor het kiezen van afbeeldingen voor responsief gedrag (zodat ze nooit groter worden dan hun bovenliggende elementen) en om er lichtgewicht stijlen aan toe te voegen - allemaal via klassen.

Responsieve afbeeldingen

Afbeeldingen in Bootstrap worden responsive gemaakt met .img-fluid. max-width: 100%;en height: auto;worden toegepast op de afbeelding zodat deze wordt geschaald met het bovenliggende element.

<img src="..." class="img-fluid" alt="...">

SVG-afbeeldingen en Internet Explorer

In Internet Explorer 10 en 11 zijn SVG-afbeeldingen met .img-fluidonevenredig groot. Om dit op te lossen, voeg width: 100%;of .w-100waar nodig toe. Deze correctie past de grootte van andere afbeeldingsindelingen niet goed toe, zodat Bootstrap deze niet automatisch toepast.

Miniaturen van afbeeldingen

Naast onze randradiushulpprogramma's kunt u deze gebruiken .img-thumbnailom een afbeelding een afgeronde rand van 1px te geven.

<img src="..." class="img-thumbnail" alt="...">

Afbeeldingen uitlijnen

Lijn afbeeldingen uit met de helper float-klassen of tekstuitlijningsklassen . block-level afbeeldingen kunnen worden gecentreerd met behulp van de .mx-automargin utility class .

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Afbeelding

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

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