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="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.

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

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