Source

Imej

Dokumentasi dan contoh untuk mengikut sertakan imej ke dalam gelagat responsif (supaya imej itu tidak menjadi lebih besar daripada elemen induknya) dan menambah gaya ringan padanya—semuanya melalui kelas.

Imej responsif

Imej dalam Bootstrap dibuat responsif dengan .img-fluid. max-width: 100%;dan height: auto;digunakan pada imej supaya ia berskala dengan elemen induk.

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

Dalam Internet Explorer 10, imej SVG dengan .img-fluidbersaiz tidak seimbang. Untuk membetulkannya, tambah width: 100% \9;jika perlu. Pembetulan ini mensaiz format imej lain secara tidak betul, jadi Bootstrap tidak menggunakannya secara automatik.

Lakaran kenit imej

Sebagai tambahan kepada utiliti jejari sempadan kami , anda boleh gunakan .img-thumbnailuntuk memberikan imej rupa sempadan 1px bulat.

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">

Menjajarkan imej

Jajarkan imej dengan kelas apungan pembantu atau kelas penjajaran teks . blockImej peringkat boleh dipusatkan menggunakan kelas .mx-autoutiliti 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

Jika anda menggunakan <picture>elemen untuk menentukan berbilang <source>elemen untuk <img>, pastikan anda menambah .img-*kelas pada <img>dan bukan pada <picture>teg.

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