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:  Full Page Background Slideshow dengan JQuery

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

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

Komentar

comments

ardianzzz

Male, CSS carver who worked at Kaskus

grain storage kocaeli escort