Gambar-gambar
Dokumentasi dan contoh untuk mengikutsertakan gambar ke dalam perilaku responsif (sehingga mereka tidak pernah menjadi lebih besar dari elemen induknya) dan menambahkan gaya ringan ke dalamnya—semua melalui kelas.
Gambar responsif
Gambar di Bootstrap dibuat responsif dengan .img-fluid
. max-width: 100%;
dan height: auto;
diterapkan pada gambar sehingga menskalakan dengan elemen induk.
<img src="..." class="img-fluid" alt="...">
Gambar SVG dan Internet Explorer
Di Internet Explorer 10 dan 11, gambar SVG dengan .img-fluid
ukuran yang tidak proporsional. Untuk memperbaikinya, tambahkan width: 100%;
atau .w-100
jika perlu. Perbaikan ini tidak sesuai dengan ukuran format gambar lain, sehingga Bootstrap tidak menerapkannya secara otomatis.
Thumbnail gambar
Selain utilitas radius batas kami , Anda dapat menggunakan .img-thumbnail
untuk memberikan gambar tampilan batas 1px yang membulat.
<img src="..." class="img-thumbnail" alt="...">
Menyejajarkan gambar
Sejajarkan gambar dengan kelas float pembantu atau kelas penyelarasan teks . block
-gambar level dapat dipusatkan menggunakan kelas .mx-auto
utilitas margin .
<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>
Gambar
Jika Anda menggunakan <picture>
elemen untuk menentukan beberapa <source>
elemen untuk <img>
, pastikan untuk menambahkan .img-*
kelas ke <img>
dan bukan ke <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>