Trik Sederhana Menampilkan Gambar Untuk Thumbnail

Template Landing Page untuk Blogspot

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:  Tutorial Bootstrap untuk Pemula - Grid Layout (bagian 2)

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…

Tags

contoh thumbnail,contoh gambar thumbnail,cara memunculkan thumbnail di blog dengan css,thumbnails di web programing itu untuk apa,Cara Menampilkan Thumblain Css,menampilkan gallery html,menampilkan data ke samping dari database mysql ke grid thumbnail,menampilkan data gambar dengan horizontal ci,membuat thumbnails gambar,membuat display produk dengan php,bootstrap gambar auto,menampilkan thumbnail mysql,mengaktifkan gambar thumbails pada php,thumbail image bootstrap for toko online,thumbnail bootstrap berada di tengah,tips menampilkan gambar php,membuat display produk dengan bootstrap,koding thumbnail wordpress,Kode html thumbnail,cara membuat thumbnail html ukuran tetap

Komentar

comments

ardianzzz

Male, CSS carver who worked at Kaskus

grain storage kocaeli escort