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 we de ansa wit .img-fluid. max-width: 100%;ɛn height: auto;dɛn kin aplay pan di pikchɔ so dat i go skel wit di mama ɛn papa ɛlimɛnt.

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

SVG imej ɛn IE 10

Insay Intanɛt Ɛksplɔrɔ 10, SVG pikchɔ dɛn wit .img-fluidna disproportionately saiz. Fɔ fiks dis, ad width: 100% \9;usay nid de. Dis fiks nɔ de saiz ɔda imej fɔmat dɛn fayn fayn wan, so Bootstrap nɔ de yuz am ɔtomɛtik wan.

Imej dɛn we gɛt smɔl pikchɔ dɛn

Apat frɔm wi border-radius utilities , yu kin yuz .img-thumbnailfɔ gi wan pikchɔ wan rawnd 1px bɔda apinɛns.

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

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-automargin yutiliti klas .

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>