Billeder
Dokumentation og eksempler på at vælge billeder til responsiv adfærd (så de aldrig bliver bredere end deres forælder) og tilføje lette stilarter til dem – alt sammen via klasser.
Responsive billeder
Billeder i Bootstrap er gjort responsive med .img-fluid
. Dette gælder max-width: 100%;
og height: auto;
for billedet, så det skalerer med forældrebredden.
<img src="..." class="img-fluid" alt="...">
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-start" alt="...">
<img src="..." class="rounded float-end" 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>
Sass
Variabler
Variabler er tilgængelige for billedminiaturer.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;