Di artikel kali ini, kita akan membahas soal bagaimana cara menyesuaikan gambar dengan menggunakan CSS. Properti CSS "object-fit" ini digunakan untuk menentukan bagaimana ukuran gambar akan disesuaikan dengan tag pembungkusnya.
Properti ini memberi tahu gambar untuk mengisi wadah dengan berbagai cara, seperti mempertahankan aspect ratio atau meregangkan dan menempati ruang sebanyak mungkin.
Misalnya seperti gambar dibawah ini. Gambar ini memiliki lebar 500 pixel dan tinggi 300 pixel:
Namun ketika kita ubah lebar gambarnya menjadi setengah dari lebar sebelumnya yaitu 200 pixel tapi dengan tinggi yang masih sama yaitu 300 pixel, maka tampilan gambarnya akan jadi seperti ini:
Kita bisa lihat bahwa gambarnya menjadi padat karna menyesuaikan ukuran dari tag pembungkusnya yang berukuran 250x300 pixel, dan ukuran aspect ratio aslinya juga berubah.
Disinilah properti CSS "object-fit" bisa berperan. Properti "object-fit" memiliki beberapa value yang bisa digunakan untuk menyesuaikan gambar.
Dibawah ini adalah beberapa value dari object-fit beserta contoh-contoh dari penerapan properti object-fit untuk setiap valuenya.
-
fill : Ini adalah value default dari properti object-fit. Gambar akan diubah ukurannya agar sesuai dengan dimensi yang diberikan ke tag pembungkus. Jika perlu, gambar akan diregangkan atau dikompresi agar sesuai.
object-fit: fill
-
contain : Gambar akan mempertahankan aspect rationya, tetapi ukurannya akan diubah agar menyesuaikan dengan dimensi tag yang diberikan.
object-fit: contain
-
cover : Gambar akan mempertahankan aspect rationya dan memenuhi dimensi yang diberikan. Tetapi akan terdapat bagian pada gambar yang dipotong agar menyesuaikan ukuran tag pembungkusnya.
object-fit: cover
-
none : Ukuran gambar tidak akan diubah.
object-fit: none
-
scale-down : Gambar akan diperkecil ke versi terkecil seperti value "none" atau "contain".
object-fit: scale-down