in English

Ofbyldings

Dokumintaasje en foarbylden foar it kiezen fan ôfbyldings foar responsyf gedrach (sadat se nea breder wurde as har âlder) en foegje ljochte stilen ta oan har - allegear fia klassen.

Op dizze side

Responsive ôfbyldings

Ofbyldings yn Bootstrap wurde responsyf makke mei .img-fluid. Dit jildt max-width: 100%;en height: auto;foar de ôfbylding sadat it skalen mei de âlder breedte.

html

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

Miniatuerbylden

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

html

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

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

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

Sass

Fariabelen

Fariabelen binne beskikber foar ôfbyldingsminiatueren.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;