in English

Ofbyldings

Dokumintaasje en foarbylden foar it kiezen fan ôfbyldings yn responsyf gedrach (sadat se nea grutter wurde as har âldereleminten) en foegje lichtgewichtstilen oan har ta - allegear fia klassen.

Responsive ôfbyldings

Ofbyldings yn Bootstrap wurde responsyf makke mei .img-fluid. max-width: 100%;en height: auto;wurde tapast op de ôfbylding sadat it skalen mei it âlderelemint.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">
SVG-ôfbyldings en Internet Explorer

Yn Internet Explorer 10 en 11 binne SVG-ôfbyldings mei .img-fluidûnevenredich grutte. Om dit te reparearjen, tafoegje width: 100%;of .w-100wêr nedich. Dizze reparaasje makket oare ôfbyldingsformaten ferkearde grutte, sadat Bootstrap it net automatysk tapast.

Miniatuerbylden

Neist ús nutsfoarsjenningen foar grinsradius kinne jo gebrûk .img-thumbnailmeitsje om in ôfbylding in rûne 1px-rânúterlik te jaan.

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="...">

Ofbyldings oanpasse

Ofbyldings ôfstimme mei de helper-float-klassen as tekst-ôfstimmingsklassen . block-nivo-ôfbyldings kinne sintraal wurde mei de .mx-automarzje- nutsklasse .

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

Ofbylding

As jo ​​​​it <picture>elemint brûke om meardere <source>eleminten foar in spesifyk op te jaan <img>, soargje derfoar dat jo de .img-*klassen tafoegje oan 'e <img>en net oan' e <picture>tag.

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