Sɛbɛnw ni misaliw walasa ka jaw 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.

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">
SVG jaw ani Ɛntɛrinɛti Explorer

Internet Explorer 10 ani 11 kɔnɔ, SVG jaw ni .img-fluidu bonya tɛ kelen ye. Walasa k’o labɛn, aw bɛ dɔ fara a kan width: 100%;walima .w-100yɔrɔ min na a mago bɛ a 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 , i bɛ se ka baara kɛ ni .img-thumbnailmin ye walasa ka ja dɔ di a ma ni 1px dankan ye min bɛ kɛ bulama ye.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

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 .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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>