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.

Op deze pagina

Responsieve afbeeldingen

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

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

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-start" alt="...">
<img src="..." class="rounded float-end" 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>

Sass

Variabelen

Er zijn variabelen beschikbaar voor afbeeldingsminiaturen.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;