Source

Litšoantšo

Litokomane le mehlala ea ho khetha litšoantšo hore e be batho ba arabelang (e le hore li se ke tsa fetoha tse kholo ho feta likarolo tsa batsoali ba tsona) 'me u li kenye mekhoa e bobebe ho tsona-tsohle ka lihlopha.

Litšoantšo tse arabelang

Litšoantšo ho Bootstrap li etsoa hore li arabele ka .img-fluid. max-width: 100%;'me height: auto;li sebelisoa ho setšoantšo e le hore se kala ka elemente ea motsoali.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
Litšoantšo tsa SVG le IE 10

Ho Internet Explorer 10, litšoantšo tsa SVG tse nang .img-fluidle boholo bo sa lekanang. Ho lokisa sena, eketsa width: 100% \9;moo ho hlokahalang. Tokiso ena e boholo bo sa lokelang liforomo tse ling tsa litšoantšo, kahoo Bootstrap ha e e sebelise ka bo eona.

Litšoantšo tsa setšoantšo

Ntle le lits'ebeletso tsa rona tsa "radius" , o ka sebelisa .img-thumbnailho fa setšoantšo ponahalo e pota-potiloeng ea 1px.

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

Ho lekanya litšoantšo

Hlophisa litšoantšo le lihlopha tsa float kapa litlelase tsa tatellano ea mongolo . block-Litšoantšo tsa boemo bo ka beoa bohareng ho sebelisoa sehlopha sa lisebelisoa tsa .mx-automarang-rang .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Setšoantšo

Haeba u sebelisa <picture>element ho hlakisa <source>lintlha tse ngata bakeng sa ntho e itseng <img>, etsa bonnete ba hore u kenyelletsa .img-*lihlopha ho e <img>seng ho <picture>tag.

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