Membuat Website dengan Menggunakan HTML

Mempercantik Tampilan Website dengan Menggunakan CSS

Mempercepat Proses Pembuatan Website dengan Bootstrap

Image Responsive dengan Bootstrap

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