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

Bagi teman-teman yang belum menyimak part-1 tentang Cara Menggunakan Property CSS object-fit. Bisa simak di part-1

Official Syntax

object-fit: fill | contain | cover | none | scale-down

Values

fill: Konten elemen yang diganti berukuran (ditingkatkan atau diturunkan, direntangkan atau menyusut) untuk mengisi kotak konten elemen yang ditentukan menggunakan properti lebar dan tinggi. Rasio aspek konten tidak dipertahankan saat ukurannya memenuhi elemen.

contain: Rasio aspek dari konten elemen yang diganti dipertahankan, dan ditingkatkan sebanyak mungkin sambil tetap terkandung dalam batas-batas elemen, ditentukan oleh tinggi dan lebarnya.

cover: Rasio aspek dari konten elemen yang diganti dipertahankan, dan ditingkatkan cukup untuk mengisi seluruh kotak konten elemen yang ditentukan oleh lebar dan tinggi.

none: Konten yang diganti tidak diubah ukurannya agar pas di dalam kotak konten elemen.

scale-down: Ukuran konten seolah-olah tidak ada atau mengandung ditentukan, yang mana akan menghasilkan ukuran objek beton yang lebih kecil. Menurut spesifikasi: Ukuran objek konkret adalah hasil menggabungkan dimensi intrinsik objek dan ukuran yang ditentukan dengan ukuran objek default dari konteks yang digunakan, menghasilkan persegi panjang dengan lebar dan tinggi yang pasti.

Gambar berikut menunjukkan nilai objek-fit yang berbeda seperti yang diterapkan pada gambar yang rasio aspeknya berbeda dari rasio aspek elemen yang mereferensikannya (tag <img>):