Cara Menggunakan Property CSS object-fit part-1

Property object-fit menentukan bagaimana isi elemen yang diganti harus dipasang ke kotak yang ditetapkan oleh tinggi dan lebar yang digunakan.

Apa itu Elemen Diganti?

Elemen yang diganti adalah elemen yang dimensi dan kontennya didefinisikan di luar ruang lingkup CSS. Elemen yang diganti sering memiliki dimensi intrinsik — lebar dan tinggi seperti yang didefinisikan oleh elemen itu sendiri, tidak dipaksakan oleh lingkungan atau didefinisikan dalam CSS. Misalnya, gambar bitmap memiliki lebar intrinsik dan tinggi intrinsik yang ditentukan dalam satuan absolut, dan dari mana rasio intrinsik dapat ditentukan.

Contoh lain dari elemen yang diganti adalah dokumen yang disematkan, elemen <textarea> dan dan <input>.


Sizing Elemen Diganti Menggunakan object-fit

Terkadang, Anda mungkin ingin atau perlu memiliki semua gambar (atau video, atau input, dll.) Pada halaman yang memiliki nilai tinggi dan lebar yang sama. Contohnya adalah gambar avatar di profil atau testimonial pengguna.

Gambar yang Anda gunakan pada halaman mungkin tidak memiliki dimensi yang sama, apalagi rasio aspek yang sama. Ini sangat umum dalam aplikasi di mana pengguna dapat mengunggah dan menggunakan gambar mereka sendiri yang perlu dibuat agar sesuai dengan tempat-tempat tertentu dengan dimesi yang telah ditentukan.

Menggunakan properti objek-fit, Anda dapat menyesuaikan konten gambar ke dalam dimensi yang Anda tentukan dalam lembar gaya Anda.

Konten dapat diatur untuk memperbesar atau memperkecil, mengecilkan atau meregangkan seperlunya agar sesuai dengan lebar dan tinggi yang Anda tentukan, menggunakan nilai properti yang berbeda.

Lihat bagian Nilai di bawah untuk daftar nilai dan ilustrasi visual dari efek nilai yang berbeda.

Trivia & Catatan

Cara properti objek-fit mengukur isi elemen sangat mirip dengan cara elemen ukuran atribut atribut preserveAspectRatio di SVG menggunakan parameter <meetOrSlice>. Anda dapat membaca lebih lanjut tentang cara kerja preserveAspectRatio di SVG di artikel ini.

Setelah konten gambar berukuran sesuai objek, Anda dapat menempatkannya di dalam gambar menggunakan properti objek-posisi. Properti objek-posisi bekerja mirip dengan cara parameter <align> preserveAspectRatio bekerja di SVG. Lihat entri properti posisi objek untuk informasi lebih lanjut.

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.