Bilder

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

Responsive bilder

Bilder i Bootstrap er gjort responsive med .img-fluid. max-width: 100%;og height: auto;brukes på bildet slik at det skaleres med det overordnede elementet.

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

SVG-bilder og Internet Explorer

I Internet Explorer 10 og 11 er SVG-bilder med .img-fluiduforholdsmessig store. For å fikse dette, legg til width: 100%;eller .w-100der det er nødvendig. Denne rettelsen gir feil størrelse på andre bildeformater, så Bootstrap bruker den ikke automatisk.

Miniatyrbilder

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

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

Justere bilder

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

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

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>