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:  Pure, CSS Module dari Yahoo!

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 memunculkan thumbnail di blog dengan css,thumbnails di web programing itu untuk apa,Cara Menampilkan Thumblain Css,bootstrap gambar auto,menampilkan thumbnail mysql,menampilkan gallery html,koding thumbnail wordpress,kode css untuk atur thumbnail#spf=1,javascript untuk menampilkan gambar seperti di bukalapak,gambar thunail bootstrap css,cara menampilkan thumbnail di script html,Cara menampilkan gambar tumbnail dan meng edit css,Cara menampilkan gambar di tumbnail css,tips menampilkan gambar php

Komentar

comments

ardianzzz

Male, CSS carver who worked at Kaskus

grain storage hd porno izle turk porno