Source

Gambar

Dokumentasi lan conto kanggo milih gambar menyang prilaku responsif (supaya padha ora dadi luwih gedhe tinimbang unsur induk) lan nambah gaya entheng kanggo wong-kabeh liwat kelas.

Gambar responsif

Gambar ing Bootstrap digawe responsif karo .img-fluid. max-width: 100%;lan height: auto;ditrapake kanggo gambar supaya skala karo unsur induk.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Gambar SVG lan IE 10

Ing Internet Explorer 10, gambar SVG kanthi .img-fluidukuran ora proporsional. Kanggo ndandani iki, tambahake width: 100% \9;yen perlu. Iki ndandani ukuran format gambar liyane sing ora bener, mula Bootstrap ora bisa digunakake kanthi otomatis.

Gambar cilik gambar

Saliyane utilitas radius wewatesan , sampeyan bisa nggunakake .img-thumbnailkanggo menehi gambar tampilan wewatesan 1px sing dibunderaké.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

Nyelarasake gambar

Selarasake gambar karo kelas helper float utawa kelas alignment teks . block-gambar tingkat bisa dipusatake nggunakake kelas .mx-autosarana margin .

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

Gambar

Yen sampeyan nggunakake <picture>unsur kanggo nemtokake macem -macem <source>unsur kanggo tartamtu <img>, priksa manawa kanggo nambah .img-*kelas kanggo <img>lan ora kanggo <picture>tag.

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