Billeder
Dokumentation og eksempler på at vælge billeder til responsiv adfærd (så de aldrig bliver større end deres overordnede elementer) og tilføje lette stilarter til dem – alt sammen via klasser.
Responsive billeder
Billeder i Bootstrap er gjort responsive med .img-fluid
. max-width: 100%;
og height: auto;
anvendes på billedet, så det skaleres med det overordnede element.
<img src="..." class="img-fluid" alt="...">
SVG-billeder og Internet Explorer
I Internet Explorer 10 og 11 er SVG-billeder med .img-fluid
uforholdsmæssigt store. For at rette dette skal du tilføje width: 100%;
eller .w-100
hvor det er nødvendigt. Denne rettelse tilpasser andre billedformater forkert, så Bootstrap anvender den ikke automatisk.
Billedminiaturer
Ud over vores border-radius-værktøjer kan du bruge .img-thumbnail
til at give et billede en afrundet 1px-kant.
<img src="..." class="img-thumbnail" alt="...">
Justering af billeder
Juster billeder med hjælper-float-klasserne eller tekstjusteringsklasser . block
Billeder på niveau kan centreres ved hjælp af .mx-auto
margin utility-klassen .
<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>
Billede
Hvis du bruger <picture>
elementet til at specificere flere <source>
elementer for en specifik <img>
, skal du sørge for at tilføje .img-*
klasserne til <img>
og ikke til <picture>
tagget.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>