Spring til hovedindhold Spring til dokumentnavigation
in English

Billeder

Dokumentation og eksempler på at vælge billeder til responsiv adfærd (så de aldrig bliver større end deres overordnede elementer) og tilføje lette stilarter til dem – alt sammen via klasser.

Responsive billeder

Billeder i Bootstrap er gjort responsive med .img-fluid. Dette gælder max-width: 100%;og height: auto;for billedet, så det skaleres med det overordnede element.

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

Billedminiaturer

Ud over vores border-radius-værktøjer kan du bruge .img-thumbnailtil at give et billede en afrundet 1px-kant.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

Justering af billeder

Juster billeder med hjælper-float-klasserne eller tekstjusteringsklasser . blockBilleder på niveau kan centreres ved hjælp af .mx-automargin utility-klassen .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Billede

Hvis du bruger <picture>elementet til at specificere flere <source>elementer for en specifik <img>, skal du sørge for at tilføje .img-*klasserne til <img>og ikke til <picture>tagget.

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

Sass

Variabler

Variabler er tilgængelige for billedminiaturer.

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