Source

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.

100 % x 250 
<img src="..." class="img-fluid" alt="Responsive image">
SVG-bilder og IE 10

I Internet Explorer 10 er SVG-bilder med .img-fluiduforholdsmessig store. For å fikse dette, legg til width: 100% \9;der 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.

200 x 200 
<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 .

200 x 200 200 x 200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200 x 200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200 x 200 
<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 til .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>