Ebifaananyi

Ebiwandiiko n’ebyokulabirako eby’okulonda ebifaananyi mu nneeyisa ey’okuddamu (kale tebifuuka bigazi okusinga muzadde waabwe) n’okubigattako emisono egy’obuzito —byona nga biyita mu bibiina.

Ku muko guno

Ebifaananyi ebiddamu

Ebifaananyi mu Bootstrap bikolebwa nga biddamu ne .img-fluid. Kino kikola max-width: 100%;era height: auto;ku kifaananyi ne kigerageranya n’obugazi bw’omuzadde.

html

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

Ebifaananyi ebitonotono

Ng’oggyeeko border-radius utilities zaffe , osobola okukozesa .img-thumbnailokuwa ekifaananyi endabika y’ensalosalo eya 1px eyeetooloovu.

html

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

Okusengeka ebifaananyi

Laganya ebifaananyi n'ebika by'omuyambi ebitengejja oba kiraasi z'okulaganya ebiwandiiko . block-level ebifaananyi bisobola okuteekebwa wakati nga tukozesa margin .mx-autoutility class .

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>

Ekifaananyi

Bw’oba okozesa <picture>ekintu okulaga <source>ebintu ebingi ku specific <img>, kakasa nti ogattako .img-*kiraasi ku <img>so si ku <picture>tag.

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

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

Enkyukakyuka ziriwo ku bifaananyi ebitonotono.

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