Bilder

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

På den här sidan

Responsiva bilder

Bilder i Bootstrap görs responsiva med .img-fluid. Detta gäller max-width: 100%;och height: auto;för bilden så att den skalas med föräldrabredden.

<img src="..." class="img-fluid" alt="...">

Bildminiatyrer

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

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

Justera bilder

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

<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>

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>

Sass

Variabler

Variabler är tillgängliga för bildminiatyrer.

$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;