Ketika membangun sebuah website atau layout website dasar menggunakan struktur kode Front End tentu ada saja satu atau beberapa diantaranya memerlukan gambar untuk ditampilkan, termasuk ketika menggunakan framework Bootstrap.
Biasanya untuk menampilkan gambar pada web / blog menggunakan struktur seperti ini: <img src="gambar1.jpg" alt="Gambar" width="100%" height="345"> Ini biasa dilakukan jika menampilkan gambar menggunakan HTML CSS saja. Jika menggunakan Bootstrap, cobalah menghapus lebar dan tinggi (width dan height), karena ada class untuk gambar yang disediakan Bootstrap agar gambar menjadi responsive.
Gunakanlah class img-responsive (untuk Bootstrap 3), gunakan img-fluid (untuk Bootstrap 4), contoh:
<img class="img-responsive" src="gambar1.jpg" alt="Gambar Bootstrap 3"> <img class="img-fluid" src="gambar2.jpg" alt="Gambar Bootstrap 4">
Dengan begitu gambar akan menjadi responsive sesuai ukuran pembungkusnya, tidak perlu mengatur ini itu lagi semuanya sudah rapih. Simpan dan lihat hasilnya !
Jika ingin style lebih lanjut, silahkan beri class seperti biasa kemudian style pada class baru tersebut seperti yang dijelaskan pada postingan sebelumnya tentang membuat website menggunakan Bootstrap. Secara otomatis gambar tersebut akan menyesuaikan ukuran perangkat yang digunakan.
Jangan lupa untuk mencari tau lebih lanjut tentang perbedaan antara Boostrap versi 3 & Bootstrap versi 4, biar gak salah koding.
Selamat mencoba !