Source

Bilder

Dokumentation och exempel för att välja bilder till responsivt beteende (så att de aldrig blir större än sina överordnade element) och lägga till lätta stilar till dem – allt via klasser.

Responsiva bilder

Bilder i Bootstrap görs responsiva med .img-fluid. max-width: 100%;och height: auto;tillämpas på bilden så att den skalas med det överordnade elementet.

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

I Internet Explorer 10 är SVG-bilder med .img-fluidoproportionerligt stora. För att fixa detta, lägg till width: 100% \9;vid behov. Den här korrigeringen har felaktig storlek på andra bildformat, så Bootstrap tillämpar den inte automatiskt.

Bildminiatyrer

Förutom våra border-radius-verktyg kan du använda .img-thumbnailför att ge en bild ett avrundat 1px-utseende.

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

Justera bilder

Justera bilder med hjälparflot-klasserna eller textjusteringsklasserna . block-nivåbilder kan centreras med hjälp av .mx-automarginalverktygsklassen .

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

Bild

Om du använder <picture>elementet för att specificera flera <source>element för en specifik <img>, se till att lägga till .img-*klasserna till <img>och inte till <picture>taggen.

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