Tampilan visual sebuah website menjadi salah satu kunci utama untuk menarik perhatian pengunjung.

Bayangkan saat membuka sebuah halaman web mata kita langsung tertuju pada gambar yang proporsional dan menarik. Properti object-fit dalam CSS berperan penting di balik visualisasi tersebut.

Object-fit CSS adalah properti yang membantu menyesuaikan ukuran gambar dan video dalam container, menjaga tampilan media tetap rapi, bahkan jika ukurannya tidak simetris. Properti ini memastikan media selalu terlihat proporsional, baik dengan mempertahankan aspect ratio maupun mengisi penuh ruang yang ada.

Object-fit CSS bertindak sebagai jembatan antara estetika dan fungsionalitas, memastikan setiap elemen visual (baik itu gambar/video) ditampilkan dengan sempurna di berbagai ukuran layar dan perangkat. Mari kita selami lebih dalam tentang object-fit dan bagaimana cara menggunakannya!

Syntax Object Fit

Sintaks dasar dari object-fit adalah sebagai berikut:

Value dapat digantikan dengan salah satu dari opsi berikut:

• fill: Ini adalah nilai default. Gambar/video akan diubah ukurannya untuk mengisi container secara penuh, bahkan jika itu berarti harus meregangkan atau mengecilkan media tersebut.

• contain: media akan diubah ukurannya agar masuk ke dalam seluruh container sambil menjaga aspect ratio-nya. Artinya, media mungkin tidak mengisi seluruh container jika aspect ratio berbeda dengan container.

• cover: media akan diubah ukurannya untuk mengisi seluruh container dengan tetap menjaga aspect ratio. Jika aspect ratio media berbeda dengan container, bagian dari media kemungkinan akan dipotong.

• none: media tidak akan diubah ukurannya sama sekali.

• scale-down: media akan diubah ukurannya menjadi yang paling kecil antara value none atau contain.

Cara dan Contoh Penggunaan Object Fit CSS

Berikut cara untuk menambahkan properti object-fit ke elemen HTML menggunakan CSS:

• Pilih elemen target: pertama, buka elemen HTML yang ingin kamu terapkan object-fit. Elemen biasanya berupa gambar/video.
• Buka stylesheet: buka file CSS yang digunakan untuk mengatur tampilan halaman web. Jika belum memiliki, buatlah file CSS baru lalu hubungkan dengan halaman HTML.
• Tulis kode CSS: tentukan elemen target dalam CSS (misalnya, img untuk semua gambar) dan tambahkan properti object-fit dengan value yang diinginkan.
• Simpan dan uji: setelah menambahkan kode CSS, simpan perubahan pada file CSS dan refresh halaman web untuk melihat hasilnya.

Berikut contoh penggunaan object fit CSS:

Contoh 1: menampilkan gambar ukuran penuh

Kamu ingin gambar diubah ukurannya untuk mengisi seluruh container tanpa mempertahankan aspect ratio. Kamu bisa menggunakan object-fit: fill;.

Contoh 2: menjaga aspect ratio gambar

Untuk memastikan gambar selalu menjaga aspect ratio saat diubah ukurannya, gunakan object-fit: contain;

Contoh 3: mengisi container dengan gambar

Contoh lain yaitu kamu ingin gambar mengisi seluruh container sambil menjaga aspect ratio (dan mungkin memotong bagian dari gambar). Kamu dapat menggunakan object-fit: cover;

FAQ (Frequently Ask Question)

Apakah semua browser mendukung object fit?

Sebagian besar browser modern mendukung object-fit. Namun, beberapa versi browser lama, terutama Internet Explorer 9 tidak mendukungnya. Selalu periksa kompatibilitas browser sebelum mengimplementasikannya di Can I Use.

Apa yang terjadi jika tidak menentukan properti object-fit pada gambar?

Jika kamu tidak menentukan object-fit, nilai default-nya adalah fill. Artinya, gambar akan diubah ukurannya untuk mengisi seluruh container yang kemungkinan akan meregangkan atau mengecilkan gambar.

Penutup

Sebagai penutup, object-fit dalam CSS menjadi kunci untuk menghadirkan tampilan media yang optimal di website.

Dengan berbagai value yang dapat disesuaikan, seperti fill, contain, cover, dan lainnya, kita diberikan kebebasan untuk menentukan bagaimana gambar/video harus ditampilkan dalam container tertentu. Baik itu menjaga aspect ratio, mengisi seluruh ruang, atau bahkan tidak mengubah ukuran sama sekali, semua menjadi mungkin diaplikasikan dengan object-fit.