in English

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.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">
Ebifaananyi bya SVG ne Internet Explorer

Mu Internet Explorer 10 ne 11, ebifaananyi bya SVG ne .img-fluidbiba bya sayizi etali ya kigero. Okutereeza kino, yongerako width: 100%;oba .w-100we kyetaagisa. Ennongoosereza eno ekola obunene mu ngeri etali ntuufu ensengeka z'ebifaananyi endala, 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.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<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 .

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