Gambar Responsive dengan Bootstrap

Athhar Kautsar 6/17/2017 bootstrap

Gambar (image) di dalam Bootstrap dapat dibuat menjadi responsive dengan menambahkan class .img-responsive. Dengan menambahkan class tersebut, maka CSS property max-width: 100%; height: auto; dan display: block; diterapkan kepada gambar tersebut, sehingga gambar tersebut akan berubah ukurannya mengikuti kontainer induknya.

Untuk membuat gambar rata tengah (center), gunakan class .center-block daripada class .text-center. Brikut contoh skripnya.

HTML<img src="#" alt="without responsive image feature">
<img src="#" alt="with responsive image feature" class="img-responsive">

Pada skrip tersebut ada dua buah gambar, dimana gambar pertama tanpa fitur responsive, sedangkan gambar kedua sudah ditambahkan fitur responsive.
Perbedaan tampilan dari keuda gambar tersebut dapat dilihat dibawah ini.

Pada gambar diatas, terlihat bahwa pada saat layar normal (gambar sebelah kiri), kedua gambar kotak tersebut tampil baik-baik saja, namun ketika layar dikecilkan, maka gambar yang non-responsive tampil tidak proporsional, sedangkan gambar yang responsive (kotak di bawah) tampil mengecil sesuai dengan mengecilnya ukuran layar.

Bentuk tampilan gambar

Bootstrap memiliki tiga class untuk styling bentuk tampilan gambar, yaitu:

.img-rounded, membuat ujung-ujung image membulat (rounded)
.img-circle, membuat seluruh image menjadi bentuk oval
.img-thumbnail, akan menambah sedikit padding dan border abu-abu

Penerapan class-class diatas dapat kita lihat pada skrip dibawah ini.

HTML<img src="#" alt="rounded image" class="img-rounded">
<img src="#" alt="circle image" class="img-circle">
<img src="#" alt="thumbnail image" class="img-thumbnail">

Hasil skrip tersebut akan terlihat seperti dibawah ini.