CSS TRICK: Card Image

Devid Septian
Aug 24, 2018 · 3 min read

Hai, ketemu lagi di sesi CSS trick :D

Kali ini saya ingin menuliskan tips dan trik CSS mengenai Card Image atau apalah nama nya di sini saya sebut saja Card Image ya, mungkin sudah banyak sih artikel mengenai hal ini, tapi hitung-hitung buat pengingat saya di kala lupa dan agar nggak cari kemana-mana lagi, boleh lah kita tulis artikel ini yak, syukur-syukur kalau artikel ini bisa membantu teman-teman.

Apa itu Card Image?, jika temen-temen familiar dengan CSS Framework Bootstrap, di situ ada Component yang nama-nya Thumbnail atau kalau temen-temen sering buka Toko Online contoh nya seperti BukaLawang (kode etik jurnalistik dilarang menyebut merek) :D haha, pasti kita sering lihat product list-nya, nah seperti itulah Card Image.

Apa sih masalah yang ada di Card Image ini? nah yang sering sekali saya temui setiap ada project yang menggunakan Card Image ini adalah pada image nya. di mana image tersebut akan memiliki width dan height yang berbeda-beda sehinga akan membuat tinggi dari masing-masing Card Image akan berbeda dan membuat tampilan tak enak di pandang.

Di sini saya akan memberikan tip dan trik untuk mengatasi masalah tersebut hanya dengan menggunakan CSS, mungkin ini bukan cara yang terbaik, tapi mungkin jika mencari solusi menggunkan CSS menurut saya ini solusi adalah yang terbaik.

Oke langsung saja, misalkan kita mempunyai class dengan nama ‘card-image’ dimana ‘card-image’ menampung sebuah image seperti di bawah ini:

<div class=”card-image”>
<img src="image/yourimage.jpg">
</div>

lalu pada style CSS-nya kita pada class ‘card-image’ kita bikin seperti berikut:

.card-image {
width: 100%;
height: 110px;
position: relative;
overflow: hidden;
}

Untuk width kita buat 100% karena nanti akan menyesuaikan div wrapper yang akan menampungnya dan untuk height kita buat tingginya 110px.

Kemudian kita beri position: relative karena image-nya nanti akan kita buat absolute jadi agar image-nya tidak keluar dari div.card-image dan juga kita beri overflow: hidden agar jika image nya lebih besar dia akan tetap terlihat seperti pada ukuran size pada ‘card-image’.

Berikut nya adalah style untuk image-nya sebagai berikut:

.card-image > img {
width: 100%;
max-width: inherit;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(1.5);
-moz-transform: translate(-50%, -50%) scale(1.5);
-o-transform: translate(-50%, -50%) scale(1.5);
transform: translate(-50%, -50%) scale(1.5);
}

Untuk width kita buat 100%; dan max-width kita set inherit, karena biasanya max-width pada image di set 100%.

Kita juga harus membuat posisi image tersebut berada di tengah atau middle center, untuk itu pada style nya di atas kita beri position: absolute, top: 50%, left: 50% dan translate(-50%, -50%).

Untuk mengontrol ukuran image kita bari scale(1.5), jadi seberapapun ukuran image tersebut dia akan di scale, jika image-nya lebih kecil dengan ukuran .card-image maka dia akan di scale membesar (1.5) dan jika lebih besar dia akan di scale mengecil (1.5).

Untuk scale ini menyesuaikan ukuran pada ‘card-image’ yg ada pada artikel ini, jika ukuran ‘card-image’ teman-teman berbeda dari artikel ini, maka scale nya harus di sesuaikan lagi.

Nah silahkan di coba ya, sekali lagi ini mungkin bukan solusi yang tepat, jika teman-teman memiliki solusi yg lebih tepat atau dari artikel ini ada yg kurang silahkan beri komen ya

Dan jika suka dengan artikel ini atau jika artikel ini membentu jangan lupa like dan share ya, sampai ketemu lagi di artikel berikut nya. Bye :D

SkyshiDigital

We help scale up your startup to the next level

Devid Septian

Written by

Front End Developer

SkyshiDigital

We help scale up your startup to the next level

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade