Source

Images

Zvinyorwa uye mienzaniso yekusarudza mifananidzo kuita hunhu hwekupindura (kuitira kuti isambova hombe kupfuura zvinhu zvevabereki) uye wedzera masitaera akareruka kwavari — zvese nemakirasi.

Mifananidzo inopindura

Mifananidzo muBootstrap inogadzirwa inopindura ne .img-fluid. max-width: 100%;uye height: auto;anoshandiswa kumufananidzo kuitira kuti uenzanise nechinhu chemubereki.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
SVG mifananidzo uye IE 10

MuInternet Explorer 10, mifananidzo yeSVG ine .img-fluidyakakura zvisina mwero. Kugadzirisa izvi, wedzera width: 100% \9;pazvinenge zvakakodzera. Iyi gadziriso inokura zvisina kufanira mamwe mafomati emifananidzo, saka Bootstrap haiishandise otomatiki.

Image thumbnails

Pamusoro pemuganho-radius utilities , unogona kushandisa .img-thumbnailkupa mufananidzo wakatenderedzwa 1px muganho chitarisiko.

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

Kuenzanisa mifananidzo

Gadzirisa mifananidzo nemubatsiri anoyangarara makirasi kana makirasi ekugadzirisa zvinyorwa . block-level mifananidzo inogona kuiswa pakati uchishandisa margin .mx-autoutility kirasi .

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>

Mufananidzo

Kana iwe uri kushandisa <picture>chinhu kutsanangura akawanda <source>maelementi kune chaiyo <img>, ita shuwa yekuwedzera .img-*makirasi kune iyo <img>kwete kune iyo <picture>tag.

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