Swifaniso
Matsalwa na swikombiso swo hlawula swifaniso eka mahanyelo yo hlamula (leswaku swi nga tshuki swi anama ku tlula mutswari wa swona) na ku engetela switayele swo olova eka swona—hinkwaswo hi ku tirhisa titlilasi.
Swifaniso leswi hlamulaka
Swifaniso eka Bootstrap swi endliwa swi hlamula hi .img-fluid
. Leswi swi tirha max-width: 100%;
na height: auto;
le ka xifaniso leswaku xi ringanisa hi ku anama ka mutswari.
<img src="..." class="img-fluid" alt="...">
Swifaniso leswitsongo swa swifaniso
Ku engetela eka switirhisiwa swa hina swa border-radius , u nga tirhisa .img-thumbnail
ku nyika xifaniso xivumbeko xa ndzilakano xa xirhendzevutana xa 1px.
<img src="..." class="img-thumbnail" alt="...">
Ku ringanisa swifaniso
Hlanganisa swifaniso na titlilasi ta float ta mupfuni kumbe titlilasi ta ku ringanisa matsalwa . block
swifaniso swa xiyimo xa le henhla swi nga vekiwa exikarhi hi ku tirhisa tlilasi ya .mx-auto
vukorhokeri bya margin .
<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>
Xifaniso
Loko u tirhisa <picture>
elemente ku boxa <source>
swiaki swo tala swa specific <img>
, tiyisisa leswaku u engetela .img-*
titlilasi eka <img>
na ku nga ri eka <picture>
thegi.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Swilo leswi cinca-cincaka
Swilo leswi cinca-cincaka swi kumeka eka swifaniso leswitsongo swa swifaniso.
$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;