Source

Ebifaananyi

Ebiwandiiko n’ebyokulabirako eby’okulonda ebifaananyi mu nneeyisa ey’okuddamu (kale tebifuuka binene okusinga ebintu byabwe ebizadde) n’okubigattako emisono emitono —byona nga biyita mu bibiina.

Ebifaananyi ebiddamu

Ebifaananyi mu Bootstrap bikolebwa nga biddamu ne .img-fluid. max-width: 100%;era height: auto;zisiigibwa ku kifaananyi ne kigerageranya n’ekintu ekizadde.

100%x250 nga bwe kiri
<img src="..." class="img-fluid" alt="Responsive image">
Ebifaananyi bya SVG ne IE 10

Mu Internet Explorer 10, ebifaananyi bya SVG ne .img-fluidbiba bya sayizi etali ya kigero. Kino okukitereeza, yongerako width: 100% \9;we kyetaagisa. Ennongoosereza eno ekola obunene bw'ebifaananyi ebirala mu ngeri etali ntuufu, kale Bootstrap tegikozesa mu ngeri ya otomatiki.

Ebifaananyi ebitonotono

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

200x200 nga bwe kiri
<img src="..." alt="..." class="img-thumbnail">

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

200x200 nga bwe kiri 200x200 nga bwe kiri
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 nga bwe kiri
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 nga bwe kiri
<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>