Gambar Bootstrap 5

Kursus Pilihan

Perekomendan Kursus:

Gaya Bentuk Gambar .rounded

Contoh

Kelas menambahkan rounded ke gambar:

Coba Sendiri

<img src="flower.jpg" class="rounded" alt="Flower">

Bulatan .rounded-circle

Contoh

Kelas akan membentuk gambar seperti bulatan:

Coba Sendiri

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

Miniatur .img-thumbnail

Contoh

Kelas akan membentuk gambar seperti miniatur (dengan garis bingkai):

Coba Sendiri

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

Menyiarkan gambar .float-start Kelas akan menggerakkan gambar ke kiri, atau menggunakan .float-end Menggerakkan ke kanan:

Contoh

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Coba Sendiri

Gambar Tengah

Untuk membuat gambar di tengah, kami menambahkan kelas utility ke gambar .mx-auto (margin:auto) dan .d-block (display:block)：

Contoh

<img src="tulip.jpg" class="mx-auto d-block">

Coba Sendiri

Gambar Responsif

Gambar memiliki berbagai ukuran. Layar juga demikian. Gambar responsif akan disesuaikan secara otomatis untuk ukuran layar.

Dengan menambahkan .img-fluid Kelas ditambahkan ke <img> Tanda untuk membuat gambar responsif. kemudian gambar akan disesuaikan dengan baik ke dalam elemen induk.

.img-fluid Kelas digunakan untuk aplikasi gambar max-width: 100%; dan height: auto; ：

Contoh

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Coba Sendiri