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="Responsive image">

SVG-afbeeldingen en IE 10

In Internet Explorer 10 zijn SVG-afbeeldingen met .img-fluidonevenredig groot. Om dit op te lossen, voeg width: 100% \9;waar 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.

Een algemene vierkante tijdelijke aanduiding met een witte rand eromheen, waardoor het lijkt op een foto die is gemaakt met een oude instantcamera

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

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 .

Een algemene vierkante tijdelijke aanduiding met afgeronde hoeken

<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>