Trik Sederhana Menampilkan Gambar Untuk Thumbnail

Dear Web-Front end developers

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 1.1.

Gambar 1.1 — Diambil dari bukalapak.com 3 Juni 2012

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;
    }

HTML

<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.

Baca Juga:  Membuat Bentuk Segitiga dengan CSS

Karena fungsi overflow tidak bisa digunakan pada elemen display:table-cell; maka kita tambahkan CSS overflow:hidden; pada elemen <div class="figure"> agar thumbnail tidak melar ke bawah ketika tinggi image yang digunakan lebih dari 100px.

Untuk demo, dapat dilihat disini(JSFiddle).

Happy coding…

Komentar

comments

ardianzzz

Male, CSS carver who worked at Kaskus

grain storage instagram türk takipçi satın al