Imej dɛn
Dokumɛnt ɛn ɛgzampul fɔ pik pikchɔ dɛn to rispɔnsiv bihayvya (so dɛn nɔ go ɛva bi big pas dɛn mama ɛn papa ɛlimɛnt dɛn) ɛn ad layt stayl dɛn to dɛn—ɔl dis bay klas dɛn.
Imej dɛn we de ansa
Imej dɛn na Bootstrap dɛn mek dɛn ansa wit .img-fluid
. Dis de aplay max-width: 100%;
ɛn height: auto;
to di pikchɔ so dat i go skel wit di mama ɛn papa ɛlimɛnt.
<img src="..." class="img-fluid" alt="...">
Imej dɛn we gɛt smɔl pikchɔ dɛn
Apat frɔm wi border-radius utilities , yu kin yuz .img-thumbnail
fɔ gi wan pikchɔ wan rawnd 1px bɔda apinɛns.
<img src="..." class="img-thumbnail" alt="...">
Fɔ alaynɛt di pikchɔ dɛn
Align imej dɛn wit di ɛlda flot klas dɛn ɔ tɛks alaynɛshɔn klas dɛn . block
-lɛvel imej dɛn kin sɛntrɛd yuz di .mx-auto
margin yutiliti klas .
<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>
Pikchɔ
If yu de yuz di <picture>
ɛlimɛnt fɔ spɛsifa bɔku <source>
ɛlimɛnt dɛn fɔ wan patikyula <img>
, mek shɔ se yu ad di .img-*
klas dɛn to di <img>
ɛn nɔto to di <picture>
tɛg.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass bin de
Di tin dɛn we kin chenj
Variables de fɔ pikchɔ thumbnail dɛn.
$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;