Bootstrap 4 Images - Menyisipkan Gambar
Belajar bagaimana menyisipkan gambar dalam sebuah dokumen HTML yang ditenagai oleh Bootstrap sekaligus gambar yang ditampilkan menyesuaikan ukuran layar browser (dikenal dengan istilah responsive). Sehingga, tidak masalah apabila dilihat dari perangkat apapun baik desktop, smartphone ataupun tablet.
Responsive images
Gambar Responsif
Untuk menyisipkan gambar dalam sebuah dokumen HTML, gunakan element <img>. Agar gambarnya responsive sebagaimana dijelaskan di atas, tambahkan class .img-fluid, sehingga menjadi <img class="img-fluid">.
Berikut contoh lengkapnya:
<img src="/media/images/cat.jpg" class="img-fluid" alt="Kucing Lucu">
Perhatikan contoh di atas, dengan menggunakan class .img-fluid meskipun ukuran layar Browser diperbesar atau diperkecil, gambar akan tetap menyesuaikan layar.
Image thumbnails
Gambar thumbnail
Gambar thumbnail biasanya digunakan untuk sebuah gambar dengan style khusus. Pada Bootstrap gambar thumbnail seperti sebuah portrait yang dibingkai.
Bootstrap Menyediakan style tersendiri untuk sebuah thumbnail yaitu dengan menggunakan nama class .img-thumbnail seperti contoh di bawah ini:
<img src="/media/wiki/tuanku-imam-bonjol-100.jpg" class="img-thumbnail" alt="Tuanku Imam Bonjol">
Mengatur Posisi Gambar
Float Right
Atur posisi gambar agar terletak di sebelah kanan dari konten lain dengan menambahkan nama class .float-right seperti contoh berikut:
<img src="/media/wiki/pangeran-diponegoro-100.jpg" class="float-right" alt="Pangeran Diponegoro">
<p>Pangeran Diponegoro adalah putra sulung dari Sultan Hamengkubuwana III, raja ketiga di Kesultanan Yogyakarta. Lahir pada tanggal 11 November 1785 di Yogyakarta dengan nama Mustahar dari seorang selir bernama R.A. Mangkarawati, yaitu seorang garwa ampeyan (istri selir) yang berasal dari Pacitan.</p>
Pangeran Diponegoro adalah putra sulung dari Sultan Hamengkubuwana III, raja ketiga di Kesultanan Yogyakarta. Lahir pada tanggal 11 November 1785 di Yogyakarta dengan nama Mustahar dari seorang selir bernama R.A. Mangkarawati, yaitu seorang garwa ampeyan (istri selir) yang berasal dari Pacitan.
Float Left
Atur posisi gambar agar terletak di sebelah kiri dengan memberi nama class .float-left seperti berikut:
<img src="/media/wiki/ki-hajar-dewantara-100.jpg" class="float-left mr-3" alt="Ki Hajar Dewantara">
<p>Ki Hajar Dewantara lahir di Yogyakarta, 2 Mei 1889. Ia meninggal di Yogyakarta, 26 April 1959 pada umur 69 tahun. Setelah meninggal Ia dikukuhkan sebagai pahlawan nasional yang ke-2 oleh Presiden RI, Soekarno, pada 28 November 1959 (Surat Keputusan Presiden Republik Indonesia No. 305 Tahun 1959, tanggal 28 November 1959).</p>
Ki Hajar Dewantara lahir di Yogyakarta, 2 Mei 1889. Ia meninggal di Yogyakarta, 26 April 1959 pada umur 69 tahun. Setelah meninggal Ia dikukuhkan sebagai pahlawan nasional yang ke-2 oleh Presiden RI, Soekarno, pada 28 November 1959 (Surat Keputusan Presiden Republik Indonesia No. 305 Tahun 1959, tanggal 28 November 1959).
Center Image
Gambar Posisi Di Tengah
Ada dua cara untuk memposisikan gambar agar berada Ditengah-tengah. Yang pertama, dengan menggabungkan beberapa nama class diantaranya: class="mx-auto d-block" seperti contoh berikut:
<img src="/media/wiki/cut-nyak-dhien-100.jpg" class="mx-auto d-block" alt="cut nyak dhien">
Cara yang kedua adalah dengan menempatkan gambar di dalam element <div> dengan diberi nama class .text-center seperti contoh di bawah ini:
<div class="text-center">
<img src="/media/wiki/kartini-100.jpg" alt="Ibu Kita Kartini">
</div>
Gambar Sisi Bundar (Rounded Image)
Contoh gambar dengan sisi tumpul. Tambahkan nama class .rounded pada <img> element. seperti di bawah ini:
<img src="/media/wiki/sultan-hasanuddin-200.jpg" class="rounded" alt="Sultan Banten Hasanuddin">
Menggunakan Element Picture
Sisip gambar dengan <picture> Tag
Kita dapat menggunakan element <picture> yang biasa digunakan untuk merujuk gambar lebih dari satu. Gunakan tambahan kelas (nama class) sebagaimana dijabarkan diatas tepat di dalam element <img> tag bukan di dalam <picture> tag.
Untuk lebih jelasnya, perhatikan contoh di bawah ini:
<picture>
<source media="(min-width: 992px)" srcset="/media/images/camel.jpg">
<source media="(min-width: 768px)" srcset="/media/images/mouse.jpg">
<img src="/media/images/horse.jpg" class="img-fluid img-thumbnail" alt="Horse">
</picture>
Pada contoh di atas, cobalah untuk memperbesar atau memperkecil ukuran layar browser. Gambar akan berubah pada ukuran layar yang berbeda.
SHARE