Sekarang kita melakukan pengaturan untuk foto atau image agar responsive, carilah kode HTML yang berfungsi untuk menampilkan gambar penyanyi seperti baris kode berikut.
<img src="images/ebiet-g-ade.png">
Modifikasi agar tampak seperti kode baris berikut:
<img class="img-fluid img-thumbnail" src="images/ebiet-g-ade.png">
Jika sudah selesai, silahkan simpan dan lihatlah hasilnya.
Pengaturan image agar responsive dapat dilakukan dengan menggunakan class “img-fluid“, dimana style yang diterapkan adalah “max-width: 100%” dan “height: auto“. Terkadag karena gambar berukuran kecil dan kita ingin agar gambar tampil dengan memenuhi space yang ada, maka kita “img-fluid” bisa kita ganti dengan “w-100“.
Sedangkan class “img-thumbnail” berfungsi agar gambar memiliki bingkai dengan pengaturan setiap sudutnya agak membulat (tidak runcing).
Informasi tentang image bisa dibaca di https://getbootstrap.com/docs/4.0/content/images dan tentang pengaturan ukuran lebar (sizing) bisa dibaca di https://getbootstrap.com/docs/4.0/utilities/sizing