Desain sering menempatkan gambar di dalam kotak dengan ukuran tetap: thumbnail 100x100, area media kartu yang harus rata di semua item, avatar bulat di daftar komentar. Memaksa gambar 8:5 masuk ke kotak persegi hanya dengan width dan height menghasilkan dua pilihan yang sama buruknya: gambar tertekan karena direntangkan, atau muncul ruang kosong karena diperkecil. Property object-fit menyelesaikan persoalan klasik ini dengan lima strategi pengisian yang jelas, dan menjadi salah satu property paling sering dipakai di sepanjang section ini.
Masalah: Bentuk Kotak Tidak Sama dengan Bentuk Gambar #
Secara default, kotak gambar yang dipaksa berbeda rasio dari gambarnya akan meregangkan isi gambar mengikuti kotak:
.thumb-salah {
width: 140px;
height: 140px; /* rasio 1:1, sedangkan gambar 320x200 ber-rasio 8:5 */
}Lebar 320 dipaksa menjadi 140 (penyusutan 56%) sementara tinggi 200 menjadi 140 (penyusutan 30%) — proporsi horizontal dan vertikal menyusut dengan takaran berbeda, dan distorsi inilah yang diperbaiki object-fit.
Lima Nilai object-fit #
object-fit bekerja pada replaced element seperti img dan video: property ini mengatur bagaimana konten gambar dipasangkan ke dalam kotaknya.
| Nilai | Perilaku | Kesan visual |
|---|---|---|
fill (default) | gambar direntangkan mengisi kotak, rasio diabaikan | tertekan bila rasio berbeda |
contain | seluruh gambar terlihat, diperkecil sampai muat | ada ruang kosong di satu sisi (letterbox) |
cover | kotak terisi penuh, bagian gambar yang lebih dipotong | hasil penuh dengan potongan rapi |
none | gambar tampil pada ukuran intrinsik, dipotong oleh kotak | tak terskala sama sekali |
scale-down | memilih antara none dan contain, mana yang lebih kecil | kombinasi yang aman |
Keempat kotak berikut berukuran sama (135x135), tetapi diisi gambar 320x200 yang sama persis dengan nilai object-fit berbeda:
Bedanya dengan cover: piksel none tidak pernah disesuaikan, jadi pada gambar beresolusi kecil hasilnya buram.
cover vs contain: Dua Pilihan Utama #
Dari lima nilai di atas, pekerjaan sehari-hari hampir selalu berputar di dua nilai ini:
| Pertanyaan | cover | contain |
|---|---|---|
| Seluruh gambar terlihat? | tidak — bagian lebihnya terpotong | ya, utuh dari tepi ke tepi |
| Kotak terisi penuh? | ya, tanpa ruang kosong | tidak selalu — bisa ada letterbox |
| Rasio gambar terjaga? | ya | ya |
| Cocok untuk | thumbnail, hero, avatar, media kartu | diagram, logo, foto produk yang harus utuh |
Aturan praktisnya: cover berpihak pada bentuk kotak dan memotong bagian gambar yang berlebih; contain berpihak pada utuhnya gambar dan menerima ruang kosong. Memilih di antara keduanya adalah keputusan desain, bukan keputusan teknis.
Resep Thumbnail: Kotak Tetap + object-fit: cover #
Resep yang paling sering dipakai dari seluruh chapter ini:
.thumbnail-produk {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
}Terapkan resepnya pada gambar potret maupun lanskap:
Tiga deklarasinya masing-masing punya peran: width dan height membentuk kotak tujuan, object-fit: cover mengisi kotak tanpa distorsi, dan display: block menghilangkan celah inline di bawah gambar.
Ringkasan #
object-fit menawarkan lima strategi memasangkan gambar ke kotak berukuran tetap, dengan cover (isi penuh, potong kelebihan) dan contain (utuh, izinkan ruang kosong) sebagai dua pilihan sehari-hari. Resep thumbnail — kotak berukuran jelas plus object-fit: cover — menyelesaikan sebagian besar kebutuhan media kartu dan galeri. Satu keputusan masih tersisa: ketika cover memotong, bagian tengah yang dipertahankan secara default. Chapter berikutnya mengajarkan cara memilih sendiri bagian mana yang tetap terlihat lewat object-position.