Cara Mengubah Ukuran Gambar Tanpa Mengubah Aspect Ratio-nya dengan CSS

Saat menaruh gambar di sebuah website, kadang kita perlu memastikan bahwa gambar tersebut memiliki ukuran tertentu — apapun gambarnya. Mungkin untuk memastikan elemen lain disekitar gambar tersebut terletak dengan benar dang tidak berantakan. Mungkin kita ingin membuat gambar profil yang ada didalam frame dengan ukuran tertentu. Mungkin gambar tersebut berada dalam sebuah daftar banyak gambar, sehingga jika gambar-gambar tersebut berbeda semua ukurannya daftar tersebut terlihat aneh:

Daftar gambar dengan ukuran berbeda-beda.

Diatas adalah contoh daftar yang berisi gambar-gambar berbeda-beda ukurannya. Hasilnya adalah daftar yang terlihat tidak teratur dengan banyak white-space.

Kita bisa mengubah ukuran gambar tersebut dengan menggunakan properti width dan height mereka sesuai dengan ukuran yang kita mau (misalnya menyamakan ukuran semua gambar agar white-space-nya konsisten). Tapi hanya dengan mengubah width dan height, gambar tersebut akan terlihat aneh jika rasio ukuran yang baru berbeda dengan ukuran original/asilnya.

Mari kita ambil contoh gambar kadal ini:

Ukuran gambar: 247px x 371px.

Bayangkan kita mau masukan gambar ini ke website dengan ukuran baru untuk mengakomodasi desain yang sudah ada. Misalnya kita mau gambar ini berbentuk kotak dengan ukuran 300px x 200px. Kita bisa mengubahnya dari tag <img/> sendiri atau dari CSS. Hasilnya seperti ini:

Gambar merenggang.

Gambar tersebut akan di-stretch untuk memenuhi ukuran baru yang telah ditentukan (300px x 200px). Karena rasio ukuran gambar aslinya berbeda dengan yang baru, gambar akan terlihat aneh dan seperti ditarik. Sekarang ukuran gambar sudah benar, tapi gambarnya sendiri jadi jelek dan tidak sesuai.

Menggunakan object-fit

Untuk memperbaiki masalah ini, kita dapat menggunakan properti object-fit dalam CSS. Properti ini digunakan untuk menentukan bagaimana gambar ditampilkan jika ukuran barunya tidak sesuai. object-fill memiliki beberapa nilai: fill, contain, cover, none, scale-down.

fill

Nilai fill adalah nilai yang default. Dengan nilai ini gambar akan dipaksa untuk menyesuaikan dimensinya sehingga semua gambar masuk kedalam ukuran baru. Tapi nilai ini mengubah rasio aspek gambar, sehingga gambar terlihat merenggang.

contain

Nilai contain akan memastikan semua gambar masuk kedalam ukuran baru, tapi, berbeda dengan fill, gambar tidak diubah rasio aspeknya, sehingga gambar tidak terlihat merenggang.

object-fit: contain;

Ini contoh gambar kadal tadi. Semua gambar ada didalam ukuran barunya. Tapi ada sisa tempat karena ukuran asli gambar yang berbeda.

cover

Nilai cover mungkin adalah yang paling berguna. Dengan nilai ini seluruh tempat dalam ukuran yang ditentukan akan diisi gambar (jadi tidak ada tempat yang kosong), tapi rasio aspek gambar juga tidak diubah — jadi gambar tidan merenggang.

object-fit: cover;

Gambar sekarang akan diubah sebagaimana-pula sampai mengisi seluruh ukuran yang baru tanpa mengubah rasio aspeknya, dan yang lebih akan dipotong.

Mari kita kembali ke contoh daftar gambar kadal yang tadi dan menggunakan object-fit dengan nilai cover. Sekarang kita akan menentukan ukuran setiap gambar untuk menjadi 200px x 200px (kotak) sehingga semua gambar seragam. Mari juga tambahkan sedikit CSS untuk menghiasnya sedikit.

Ini hasilnya:

Daftar gambar dengan object-fit: cover;

Hasil baru ini jauh lebih baik daripada contoh yang pertama tadi. Ukuran setiap gambar seragam, tanpa mengorgankan kualitas gambar dengan di-stretch.

Jadi…

Dari contoh sederhana ini saja sudah terlihat bagaimana bergunannya properti object-fit dalam CSS. Banyak sekali aplikasi properti ini untuk menyelesaikan masalah lain. Silahkan dicoba eksplorasi sendiri menggunakan object-fit.