Bilder

Dokumentasjon og eksempler for å velge bilder til responsiv oppførsel (slik at de aldri blir bredere enn foreldrene deres) og legge til lette stiler til dem – alt via klasser.

På denne siden

Responsive bilder

Bilder i Bootstrap er gjort responsive med .img-fluid. Dette gjelder max-width: 100%;og height: auto;for bildet slik at det skaleres med overordnet bredde.

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

Miniatyrbilder

I tillegg til våre border-radius-verktøy kan du bruke .img-thumbnailtil å gi et bilde en avrundet 1px kantlinje.

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

Justere bilder

Juster bilder med hjelpefloat-klassene eller tekstjusteringsklassene . block-nivåbilder kan sentreres ved å bruke .mx-automarginverktøyklassen .

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

Bilde

Hvis du bruker <picture>elementet til å spesifisere flere <source>elementer for en spesifikk <img>, sørg for å legge .img-*klassene til <img>og ikke til <picture>taggen.

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

Sass

Variabler

Variabler er tilgjengelige for miniatyrbilder.

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