Bekerja dengan gambar adalah bagian penting dalam pengembangan web. Bootstrap menyediakan serangkaian class yang memudahkan kita untuk menampilkan gambar secara responsif dan memberikan gaya dengan cepat. Dalam tutorial kali ini, kita akan membahas cara-cara menampilkan dan memanipulasi gambar menggunakan Bootstrap.

Gambar Responsif

Salah satu fitur terpenting Bootstrap adalah kemampuannya untuk membuat gambar menjadi responsif. Artinya, ukuran gambar akan secara otomatis menyesuaikan diri dengan ukuran layar atau container induknya. Ini sangat penting untuk memastikan tampilan website Anda tetap baik di berbagai perangkat, mulai dari desktop hingga mobile.

Untuk membuat gambar menjadi responsif, cukup tambahkan class .img-fluid pada tag <img>.

<img src="gambar-anda.jpg" class="img-fluid" alt="Gambar Responsif">

Class .img-fluid menerapkan properti CSS max-width: 100%; dan height: auto;. Hal ini memastikan gambar tidak akan pernah lebih besar dari elemen induknya dan akan mempertahankan rasio aspeknya.

Bentuk Gambar (Image Shapes)

Bootstrap juga menyediakan class untuk mengubah bentuk gambar dengan mudah, seperti membuatnya memiliki sudut yang membulat atau bahkan berbentuk lingkaran sempurna.

• Sudut Melingkar: Gunakan class .rounded untuk memberikan sudut yang sedikit melingkar pada gambar.
• Lingkaran: Gunakan class .rounded-circle untuk membuat gambar menjadi bentuk lingkaran. Agar hasilnya sempurna, gambar asli sebaiknya memiliki rasio aspek 1:1 (persegi).
• Thumbnail: Gunakan class .img-thumbnail untuk memberikan tampilan bingkai seperti thumbnail foto, dengan sedikit padding dan batas abu-abu.

Berikut adalah contoh penggunaannya:

<img src="gambar-anda.jpg" class="rounded" alt="Sudut Melingkar">
<img src="gambar-anda.jpg" class="rounded-circle" alt="Gambar Lingkaran">
<img src="gambar-anda.jpg" class="img-thumbnail" alt="Gambar Thumbnail">

Perataan Gambar (Aligning Images)

Anda dapat dengan mudah mengatur perataan gambar ke kiri, kanan, atau tengah menggunakan utility class dari Bootstrap.

• Rata Kiri dan Kanan: Gunakan class .float-start untuk rata kiri dan .float-end untuk rata kanan. Jangan lupa untuk menambahkan class .clearfix atau menggunakan grid system untuk membersihkan float.
  HTML

  <img src="gambar-anda.jpg" class="rounded float-start" alt="Rata Kiri">
  <img src="gambar-anda.jpg" class="rounded float-end" alt="Rata Kanan">
  

• Rata Tengah: Untuk membuat gambar berada di tengah secara horizontal, gunakan utility class margin .mx-auto dan .d-block.
  HTML

  <img src="gambar-anda.jpg" class="rounded mx-auto d-block" alt="Rata Tengah">
  

  Jika Anda ingin menengahkan gambar yang merupakan elemen inline, Anda bisa membungkusnya dalam sebuah div dengan class .text-center.

  HTML

  <div class="text-center">
    <img src="gambar-anda.jpg" class="rounded" alt="Rata Tengah dalam Div">
  </div>
  

Gambar dengan Keterangan (Figures)

Ketika Anda perlu menampilkan gambar dengan keterangan atau caption, cara semantik yang benar adalah dengan menggunakan elemen <figure> dan <figcaption> dari HTML5. Bootstrap menata elemen-elemen ini dengan gaya dasar yang baik.

Anda dapat menggunakan utility class Bootstrap untuk menyempurnakan tampilannya.

<figure class="figure">
  <img src="gambar-anda.jpg" class="figure-img img-fluid rounded" alt="Gambar dengan Keterangan">
  <figcaption class="figure-caption text-end">Ini adalah keterangan untuk gambar di atas.</figcaption>
</figure>

Pada contoh di atas:

• .figure: Memberikan gaya dasar pada elemen <figure>.
• .figure-img: Memberikan gaya pada <img> di dalam <figure>.
• .img-fluid: Membuat gambar responsif.
• .rounded: Memberikan sudut melingkar.
• .figure-caption: Memberikan gaya pada teks keterangan.
• .text-end: Contoh utility class untuk membuat teks keterangan menjadi rata kanan.

Dengan memahami class-class ini, Anda dapat mengelola gambar di proyek Bootstrap Anda dengan lebih efisien dan memastikan tampilannya selalu optimal di berbagai perangkat. Selamat mencoba! 🚀