aldiunanto.com

Perhitungan proporsional gambar

Perhitungan gambar proporsional - Aldi Unanto

Pernahkah anda menaruh file image pada website dengan properti lebar dan tinggi yang anda atur? 300 x 300 misalnya, itu merupakan dimensi yang konstan. Hasilnya akan bagus kalau memang file image-nyapun seukuran yang serupa, atau minimal lebar dan tingginya sesuai. Tapi bagaimana jika file image yang akan anda atur memiliki ukuran 300 x 250? Apa yang akan terjadi?

Yap, hasil yang akan diperoleh akan tidak sesuai atau biasa kita sebut tidak proporsional. Entah itu kepanjangan, atau bantet (Yah ini bahasa saya yah).

So? SO…LUSI

Jadi bagaimana solusinya gan? Giniloh.. pada konsepnya, tentu kita harus bisa menjadikan tinggi atau lebar image tersebut menjadi dinamis (biasanya saya tinggi yang dijadikan dinamis), nah kita cukup setting lebarnya, dan tingginyapun akan mengikuti.

Cara apa yang akan anda pakai?

Ada beberapa cara, tergantung keperluan dan kondisi yah. Dalam studi kasus ini, saya sendiri sedikit mengalami kesulitan ketika ingin melakukan setting image proporsional dengan PHP karena biasanya hal itu akan sangat mudah jika menggunakan CSS.

1. CSS

Bagi yang belum tahu, mungkin setelah membaca seksi ini anda akan berkata ‘oh anjrit ternyata cuma gitu doang’. Ga percaya? langsung aja nih, via CSS :

Saya asumsikan anda sudah meng-import file imagenya, contoh :

dan inilah CSS nya :

udah.

Iya serius, gitu doang. Dengan memakai CSS, hanya dengan kita menyeting lebar dari sebuah gambar, maka tinggi dari gambar itu pun akan mengikuti dan ABRAKADABRA!!! image anda akan langsung kokoh proporsional.

Masalahnya adalah, bagaimana jika dalam kasus tertentu anda harus menyeting dimensi proporsional tersebut harus tidak boleh via CSS? dengan bahasa Server Side misalnya. Nah inilah masalah yang pernah saya hadapi.

2. Server side (PHP)

Kembali pada konsep awal, tinggi dari sebuah file image harus terus mengikuti secara dinamis tergantung lebar image yang anda atur. Hmmm… Langsung aja yah, waktu itu saya menggunakan bahasa Server Side PHP dengan menggunakan framework CodeIgniter. Kurang lebih kodenya seperti ini gan :

Bingung? biar saya jabarkan.
Pertama, kita load sebuah library bernama ‘image_lib‘, kemudian membuat sbeuah variable yang isinya adalah konfigurasi menggunakan array untuk library image_lib itu sendiri yang memang ia butuhkan. Nama image library-nya g2, source image nya bernama 57634.png yang berada di direktori /assets/images/. dan lebarnya kita setting 120.

Jika hanya seperti itu, kita hanya akan menyeting lebarnya saja sebesar 120 dan tingginya? tingginya akan sama seperti gambar awal. Misalnya gambar awal mempunyai tinggi 350, maka file image yang akan dihasilkan nantinya mempunya dimensi 120 x 350. Tentu tidak proporsional!

Nah disitulah kuncinya bro. Penjabarannya adalah sebagai berikut :
tinggi_akhir = lebar_hasil / lebar_awal * tinggi_awal

Dengan perhitungan di atas, maka tinggi yang akan dihasilkan dijamin sesuai dan proporsional gan. Karena rumus itu sudah baku.

Itu adalah basic, pengembangannya tergantung kebutuhan anda yah. Jika anda menggunakan Java, Javascript, Python, atau apapun itu selain CSS,, bisa diwujudkan dengan meng-implementasikan rumus tersebut.

Selamat mencoba gan, semoga bermanfaat.
Aldi UnantoPerhitungan proporsional gambar

4 thoughts on “Perhitungan proporsional gambar

Leave a Reply

%d bloggers like this: