Imifanekiso

Amaxwebhu kunye nemizekelo yokukhetha imifanekiso ekuziphatheni okuphendulayo (ukuze ingaze ibe mikhulu kunezinto zomzali wayo) kwaye yongeze izitayile ezikhaphukhaphu kubo-zonke ngeeklasi.

Imifanekiso ephendulayo

Imifanekiso kwiBootstrap yenziwe ukuba iphendule nge .img-fluid. max-width: 100%;kwaye height: auto;zisetyenziswe kumfanekiso ukuze ulinganise ngento engumzali.

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

Imifanekiso yeSVG kunye ne-IE 10

Kwi-Internet Explorer 10, imifanekiso yeSVG enesayizi .img-fluidengalinganiyo. Ukulungisa oku, yongeza width: 100% \9;apho kuyimfuneko. Olu lungiso lulinganisa ngokungafanelekanga ezinye iifomati zemifanekiso, ngoko ke iBootstrap ayiyisebenzisi ngokuzenzekelayo.

Imifanekiselo yemifanekiso

Ukongeza kwiinkonzo zethu zerediyasi zomda , ungasebenzisa .img-thumbnailukunika umfanekiso inkangeleko engqukuva ye-1px.

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

Ukulungelelanisa imifanekiso

Lungelelanisa imifanekiso kunye neeklasi zokudada zomncedisi okanye iiklasi zolungelelwaniso lombhalo . block-imifanekiso yenqanaba inokubekwa embindini kusetyenziswa udidi .mx-autooluluncedo lomda .

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

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

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Umfanekiso

Ukuba usebenzisa <picture>isiqalelo ukukhankanya <source>izinto ezininzi zokuthile <img>, qiniseka ukuba ukongeza .img-*iiklasi kwi <img>hayi <picture>kwithegi.

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