Gambar merupakan kebutuhan utama dalam sebuah website, seperti halnya warna dalam lukisan. Kita tak bisa memisahkannya karena akan mencederai keindahannya.
Bayangkan sebuah website tanpa adanya gambar. Walaupun jernih tapi terasa membosankan bukan.
Kita perlu menambahkan gambar agar website tidak monoton. Toh jika gambar bisa mewakili ribuan kata, mengapa tidak?
Pada kesempatan ini, kita akan membahas bagaimana membuat gambar yang tampil di dalam website menjadi lebih baik. Tidak meregang ataupun menyusut.
Tentu saja kita akan menggunakan css sebagai solusi paling efisien.
***
Pada dasarnya, tag <img> berusaha menampilkan gambar secara keseluruhan. Misalnya kita punya gambar berukuran 1280×720. Kemudian kita tampilkan menjadi ukuran 200×200 maka secara default gambar akan ditampilkan seluruhnya tidak peduli gambar menyusut atau meregang.
<img src="url.jpg" style="width:200px;height:200px"/>Hasil:
Oleh karena itu, kita perlu menyamakan ukuran yang akan ditampilkan dalam website dan desain gambar yang dibuat. Misalnya kebutuhan website 200×200 maka desain yang kita buat pun harus 200×200 atau minimal dengan skala yang sama.
Hal ini tentu saja merepotkan sekali. Karena kita harus kerja dua kali. Pertama memastikan ukuran gambar dalam sebuah website. Kedua, barulah membuat gambar sesuai ukuran tersebut.
Alih-alih melakukan hal tersebut, kita cukup menambahkan sedikit syntax css dan masalah pun selesai.
Kita bisa menggunakan syntax css object-fit:cover.
<img src="url.jpg" style="object-fit:cover;width:200px;height:200px"/>Hasil:
Terlihat kan perbedaannya. Bahwa gambar tidak menyusut melainkan akan di-crop sesuai ukuran yang ditentukan.
Mudah bukan? Semoga bermanfaat.