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

Nin ɲɛ in kan

Ja minnu bɛ jaabi di

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

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

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.

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

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

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

Sass ye

Yɛlɛma-yɛlɛmaw

Yɛlɛma bɛ sɔrɔ ja fitininw na.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;