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 bangebaga 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
. O bɛ tali Kɛ max-width: 100%;
ani height: auto;
ja la walasa a ka sɛgɛsɛgɛli Kɛ ni bangebaga bonya 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-thumbnail
min 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-auto
utility 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;