Styling Image dengan Bootstrap
Gambar sangat umum dalam desain web modern. Jadi menata gambar dan menempatkannya dengan benar di halaman web sangat penting untuk meningkatkan user experience.
Menggunakan kelas bawaan Bootstrap kalian dapat dengan mudah menata gambar seperti membuat gambar sudut bulat (round corner) atau bundar (circular), atau memberi mereka efek seperti thumbnail.
<img src="images/avatar.svg" class="rounded" alt="Rounded Image"> <img src="images/avatar.svg" class="rounded-circle" alt="Circular Image"> <img src="images/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">
Output dari contoh di atas akan terlihat seperti ini:
Membuat Responsive Image dan Video
Dengan Bootstrap kalian dapat membuat image responsive juga. Cukup tambahkan kelas .img-fluid ke tag <img>. Kelas ini terutama menerapkan style max-width: 100%; dan height: auto; ke gambar sehingga skala gambar tersebut akan menyesuaikan dengan isi elemen tersebut —– dalam kasus jika lebar gambar lebih besar dari isi elemen itu sendiri. Lihat contoh berikut untuk melihat cara kerjanya:
<img src="images/kites.jpg" class="img-fluid" alt="Flying Kites"> <img src="images/sky.jpg" class="img-fluid" alt="Cloudy Sky"> <img src="images/balloons.jpg" class="img-fluid" alt="Hot Air Balloons">
Catatan: Saat membuat responsive layout, pertimbangkan untuk membuat gambar kalian juga responsif, karena kalau tidak jika lebar gambar lebih besar dari lebar elemen induk dalam hal apa pun, maka akan menyebabkan ukuran gambar jadi melebihi lebar elemen induk tersebut dan dapat merusak tata letak halaman web kalian.
Kalian juga dapat membuat video atau slideshow embedded di halaman web responsif tanpa mempengaruhi rasio aspek aslinya. Untuk melakukan ini, bungkus (wrap) semua embed seperti <iframe>, atau <video> dalam elemen <div> dan terapkan kelas .embed-responsive, dan aspek kelas rasio seperti .embed-responsive-16by9.
Kalian secara opsional dapat menerapkan item turunan eksplisit .embed-responsive-item pada elemen embedded agar sesuai dengan style untuk atribut lainnya. Berikut contohnya:
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
Pada contoh di atas, kami telah membuat 4 video responsif dengan 4 rasio aspek yang berbeda (21: 9, 16: 9, 4: 3, dan 1: 1) dengan menggunakan kelas .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3, dan .embed-responsive-1by1, masing-masing.
Tips: Aspek rasio gambar menggambarkan hubungan proporsional antara width dan height. Dua aspek rasio videografi yang umum adalah 16: 9 dan 4: 3.
Image Horizontal Alignment
Kalian dapat menyelaraskan (align) gambar ke kiri atau kanan dalam kotak yang lebih besar menggunakan kelas .pull-left atau .pull-right. Kalian juga dapat menggunakan kelas text alignment seperti .text-left, .text-right, dan .text-center pada kotak utamanya untuk menyelaraskan gambar sebaris horizontal kiri, kanan, dan tengah.
Namun, untuk membuat center align block-level image, maka kalian perlu menggunakan kelas margin utility .mx-auto.
Mari kita lihat contoh berikut untuk melihat cara kerjanya:
<!-- Horizontal alignment using float classes -->
<div class="box clearfix">
<img src="images/avatar.svg" class="pull-left" alt="Sample Image">
<img src="images/avatar.svg" class="pull-right" alt="Sample Image">
</div>
<!-- Left alignment using text alignment classes -->
<div class="box text-left">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- Right alignment using text alignment classes -->
<div class="box text-right">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- Center alignment using text alignment classes -->
<div class="box text-center">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- Center alignment of block-level image using auto margin -->
<div class="box">
<img src="images/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>
