Saya pernah buatkan sebelumnya tentang membuat semua ukuran media sama rata di HTML CSS tanpa terpotong, sekarang saya jelaskan kembali hal yang sama seperti itu tapi untuk pengguna Bootstrap.
Pada Bootstrap tentu lebih simpel dari HTML CSS seperti biasanya, misalnya saya memiliki struktur grid menggunakan panel Bootstrap seperti ini:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title read-more"><a href="">JUDUL POST</a></h3>
</div>
<div class="panel-body">
<img src="../images/blog/gambar1.jpg">
</div>
<div class="panel-footer read-more">
<a href="">Sunting</a>
</div>
</div>
Sama seperti pada HTML CSS, gambar perlu dimasukkan kedalam bungkus agar kita dapat mengatur ukurannya sama rata semua. Contohnya di code ini saya bungkus gambar di div class panel-body.
Sekarang, silahkan atur pembungkus dengan text-align overflow dan padding. Kemudian atur gambarnya dengan menentukan maksimal tinggi gambar agar semua gambar memiliki tinggi yang sama. Maka saya terapkan code seperti ini pada pembungkus (panel-body) dan gambarnya:
Baca Juga:
<div class="panel-body" style="text-align: center; overflow: hidden; padding: 0;">
<img style="max-height: 200px;" src="../images/blog/gambar1.jpg">
</div>
text-align center supaya membuat penempatan gambar dimulai dari titik tengah. Silahkan sesuai max-height pada gambar dengan ukuran yang diinginkan dan pastikan semua gambar memiliki nilai yang sama. Maka sekarang semua gambar akan memiliki tinggi yang sama dan lebar yang sama (sesuai lebar kolom dari panel).
Berapapun gambar yang dimasukkan akan menyesuaikan dengan ukuran panel-body dan tidak terpotong karena menggunakan overflow hidden. Selain itu, gambar pun akan terlihat lebih rapih karena dimulai dari titik tengah.
Catatan: Pada tutorial ini tidak menggunakan lebar dari kolom karena sudah menggunakan class yang dibuat oleh Bootstrap (panel). Jika kalian menggunakan class buatan sendiri maka perlu mengatur maksimal lebar (max-width) pada pembungkus gambar. Klik disini untuk melihat tutorial seperti ini khusus HTML & CSS (kolom / class buatan sendiri).
Masih bingung ? Lihat : Video tutorial cara membuat grid style Bootstrap.
Selamat mencoba !