Menampilkan Gambar Untuk Thumbnail

Salah satu masalah dalam pengaturan thumbnail adalah ukuran image. Ketika kita tidak memiliki kontrol terhadap ukuran image yang digunakan (misalnya pada web user-generated content), ukuran image thumbnail seringkali tidak sesuai yang kita harapkan seperti pada gambar  berikut:

Pada contoh di atas, ukuran thumbnail yang digunakan adalah 100px × 100px. Tetapi, karena gambar yang digunakan tingginya kurang dari 100px (atau gambar berbentuk persegi panjang) sehingga terdapat ruang kosong di bawah gambar (seperti yang ditunjukkan oleh tanda panah).

Berikut ini adalah salah satu trik HTML & CSS yang dapat digunakan untuk menyiasati masalah tersebut:

CSS

    div.figure {
        width:100px;
        height:100px;
        overflow:hidden;
    }
    div.figure > div {
        width:100px;
        height:100px;
        display:table-cell;
        vertical-align:middle;
    }
    div.figure > div img {
        *width:100px;
        max-width:100px;
        display:block;
        margin:0 auto;
    }

<div class="figure">
        <div>
            <img src="images.jpg" alt="" />
        </div>
    </div>

Kita bisa menggunakan CSS display:table-cell dan vertical-align:middle untuk menyiasati agar gambar selalu berada di tengah secara vertikal. Sedangkan untuk posisi horisontal (misalnya ketika ukuran lebar image kurang dari 100px) ditambahkan display:block;margin:0 auto; agar posisinya tetap di tengah.

Karena fungsi overflow tidak bisa digunakan pada elemen display:table-cell; maka kita tambahkan CSSoverflow:hidden; pada elemen  agar thumbnail tidak melar ke bawah ketika tinggi image yang digunakan lebih dari 100px.

Selamat Mencoba,

Depri Pramana