Source

Izithombe

Amadokhumenti nezibonelo zokukhetha izithombe ekuziphatheni okuphendulayo (ukuze zingalokothi zibe zinkulu kunezici zazo zomzali) futhi zengeze izitayela ezingasindi kuzo—konke ngamakilasi.

Izithombe eziphendulayo

Izithombe ku-Bootstrap zenziwa ziphendule nge- .img-fluid. max-width: 100%;futhi height: auto;zisetshenziswa esithombeni ukuze sikale ngento engumzali.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
Izithombe ze-SVG ne-IE 10

Ku-Internet Explorer 10, izithombe ze-SVG ezinamasayizi .img-fluidazilinganisiwe. Ukuze ulungise lokhu, engeza width: 100% \9;lapho kudingeka khona. Lokhu kulungisa kulinganisa ngokungafanele amanye amafomethi wesithombe, ngakho i-Bootstrap ayikusebenzisi ngokuzenzakalelayo.

Izithonjana zesithombe

Ngokungeziwe kuzinsiza zethu zerediyasi yomngcele , ungasebenzisa .img-thumbnailukunikeza isithombe ukubukeka komngcele oyindilinga ongu-1px.

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

Ukuqondanisa izithombe

Qondanisa izithombe namakilasi okuntanta komsizi noma amakilasi okuqondanisa umbhalo . block-Izithombe ezisezingeni zingamiswa phakathi kusetshenziswa isigaba sensiza ye- .mx-automargin .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Isithombe

Uma usebenzisa i- <picture>elementi ukuze ucacise <source>izici eziningi zento ethile <img>, qiniseka ukuthi ungeza .img-*amakilasi kokuthi <img>hhayi <picture>kumaka.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>