Kalau gambar diberi ukuran yang bentuknya beda dari foto aslinya, misalnya foto lebar dimasukkan ke kotak persegi, browser harus memilih: menggepengkan gambarnya, memotong pinggirnya, atau menyisakan ruang kosong. object-fit adalah properti buat <img> (dan <video>) yang menentukan pilihan itu.
🧪 Tebakan cepat: foto 800 × 400px diberi
width: 200pxdanheight: 200px, tanpaobject-fit. Apa yang terjadi dengan fotonya? Tebak dulu, jawabannya ada di bagian "fill, cover dan contain".
Gambar di dalam bingkai
<div class="frame">
<img src="https://picsum.photos/800/400" alt="Foto">
</div>
<style>
.frame {
width: 200px;
height: 200px;
}
.frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
.frameadalah bingkainya, kotak persegi 200 × 200px..frame imgadalah selector buat<img>yang ada di dalam.frame.width: 100%danheight: 100%bikin gambarnya seukuran bingkai. Tanpa dua baris ini, gambarnya tampil di ukuran aslinya (800px), danobject-fitgak punya kotak buat diisi.object-fit: covermemperbesar gambar sampai menutup seluruh kotak tanpa gepeng. Bagian yang kelebihan, di sini kiri dan kanan foto, dipotong.
Hasilnya, foto persegi yang penuh dan proporsional, tapi pinggir kiri-kanannya hilang. Perhatikan: object-fit ditulis di aturan buat <img>, bukan di bingkainya.
fill, cover dan contain
filladalah bawaan. Gambar ditarik sampai pas dengan kotaknya, jadi bisa gepeng.cover: gambar menutup seluruh kotak tanpa gepeng. Pinggir yang kelebihan dipotong.contain: gambar tampil utuh tanpa gepeng. Sisa ruangnya dibiarkan kosong, di sisi yang lebih pendek.
Jawaban tebakan: fotonya gepeng. Tanpa object-fit, yang dipakai fill, jadi foto lebar ditekan sampai jadi persegi.
Pilih cover kalau kotaknya harus penuh, misalnya foto profil atau thumbnail. Pilih contain kalau gambarnya gak boleh terpotong sedikit pun, misalnya foto produk atau logo.
Bagian mana yang disimpan: object-position
.frame img {
object-fit: cover;
object-position: top;
}
Bawaannya, cover memotong sama rata dari tengah. object-position menggeser titik fokusnya, jadi kamu yang menentukan bagian mana yang dipertahankan. top menyimpan bagian atas, cocok buat foto orang supaya wajahnya gak kepotong. Nilai lainnya: bottom, left, right, center.
⚠️ Jebakan yang sering ketemu
object-fitdi bingkainya. Ditulis di.frame, gak ada efeknya. Properti ini cuma bekerja di<img>atau<video>itu sendiri.- Gambar latar.
object-fitgak bekerja buatbackground-image. Untuk gambar latar, pakaibackground-size: coverataucontain. - Lupa
widthdanheightdi gambarnya. Tanpa ukuran, gambarnya tampil di ukuran asli dan gak ada yang perlu dipaskan.
TL;DR: object-fit menentukan cara <img> atau <video> mengisi kotak yang bentuknya beda dari gambarnya. fill (bawaan) menarik sampai gepeng, cover mengisi penuh dan memotong pinggirnya, contain menampilkan utuh dan menyisakan ruang kosong. Tulis di aturan gambarnya, bersama width dan height. object-position memilih bagian yang disimpan waktu cover memotong.
