Source

Jaw

Sɛbɛnw ni misaliw walasa ka ja sugandi ka kɛ jaabi kɛcogo ye (o la u kana bonya abada ka tɛmɛ u bangebagaw ka fɛnw kan) ani ka cogoya nɔgɔmanw fara u kan—o bɛɛ bɛ kɛ kalanw fɛ.

Ja minnu bɛ jaabi di

Ja minnu bɛ Bootstrap kɔnɔ olu bɛ kɛ jaabi ye ni .img-fluid. max-width: 100%;ani height: auto;u bɛ da ja kan walasa a ka sɛgɛsɛgɛli kɛ ni bangebaga yɔrɔ ye.

100%x250 ye 
<img src="..." class="img-fluid" alt="Responsive image">
SVG ja ani IE 10

Internet Explorer 10 kɔnɔ, SVG ja minnu bɛ ni .img-fluidolu bonya tɛ kelen ye. Walasa k’o labɛn, aw bɛ dɔ fara a kan width: 100% \9;yɔrɔ min na a mago bɛ o la. Nin labɛnni in bɛ ja cogoya wɛrɛw bonya cogo bɛnbali la, o la Bootstrap t’a waleya a yɛrɛma.

Jaa fitininw

Ka fara an ka border-radius utilities kan , aw bɛ se ka baara kɛ ni .img-thumbnailmin ye walasa ka ja dɔ di a dankan ye min bɛ 1px lamini.

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

Jaw labɛncogo ɲɔgɔn fɛ

jaaw ni dɛmɛbaga flot kalasiw walima sɛbɛnniw labɛncogo kalanw bɛn ɲɔgɔn ma . block-dakun ja bɛ se ka kɛ cɛmancɛ la ni margin .mx-autoutility class ye .

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

Ja

Ni aw bɛ baara kɛ ni <picture>fɛn ye walasa ka fɛn caman jira <source>kɛrɛnkɛrɛnnenya la <img>, aw ye aw jija ka .img-*kalanw fara taamasiyɛn kan <img>ani ka fara <picture>taamasiyɛn kan.

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