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