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.

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

SVG mifananidzo uye Internet Explorer

MuInternet Explorer 10 uye 11, mifananidzo yeSVG ine .img-fluidyakakura zvisina mwero. Kugadzirisa izvi, wedzera width: 100%;kana .w-100pazvinenge 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.

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

Kuenzanisa mifananidzo

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

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

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>