Object Fit dan Object Position

Gambar adalah elemen replaced: browser menggambarnya pada ukuran intrinsiknya sendiri. Ketika kita memaksa ukuran itu ke dalam kotak dengan proporsi berbeda — misalnya foto lanskap 400×200 dimuat ke kartu persegi — hasil default adalah distorsi: gambar diregangkan mengikuti kotak tanpa memedulikan proporsi aslinya. Properti object-fit memberi kita kendali atas cara konten replaced mengisi kotaknya, dan pasangannya object-position menentukan bagian mana yang ditonjolkan. Kedua properti ini adalah pasangan wajib untuk avatar, thumbnail berita, dan bingkai media pada Chapter Aspect Ratio .

Empat Nilai object-fit #

Demo chapter ini memuat gambar SVG 400×200 ke dalam kotak persegi 160×160 — kotak yang jelas lebih sempit dan lebih tinggi dari gambar — sehingga perbedaan keempat nilai terlihat langsung:

.kotak {
  width: 160px;
  height: 160px;
  border: 1px solid rgb(203, 213, 225);
}

.kotak-fill    img { object-fit: fill; }
.kotak-cover   img { object-fit: cover; }
.kotak-contain img { object-fit: contain; }
.kotak-none    img { object-fit: none; }

Mari kita telaah perilaku tiap nilai pada kotak 160×160 tersebut:

1. fill (default): gambar diregangkan menjadi 160×160 — proporsi 2:1 dipaksa menjadi 1:1, sehingga tampak gepeng. Ini perilaku bawaan yang memicu masalah distorsi.
2. cover: gambar diskalakan hingga menutupi seluruh kotak dengan proporsi tetap, lalu bagian yang meluber dipangkas. Hasilnya penuh tanpa distorsi; pada kotak sempit ini sisi kiri-kanan gambar yang terpangkas.
3. contain: gambar diskalakan hingga muat seluruhnya di dalam kotak dengan proporsi tetap. Tidak ada yang terpangkas, tetapi muncul ruang kosong — pada kotak ini di atas dan bawah gambar.
4. none: gambar digambar pada ukuran intrinsiknya, 400×200, lalu dipangkas oleh kotak tanpa penskalaan apa pun.

Memilih Nilai untuk Kasus Umum #

Karena keempat nilai itu memenuhi kebutuhan berbeda, keputusannya lebih baik diambil dari jenis kontennya daripada dari selera. Untuk avatar dan thumbnail galeri — konten yang wajib terlihat utuh namun boleh dipangkas tepinya — cover adalah pilihan utama; pasangkan dengan object-position bila subjeknya tidak di tengah. Untuk dokumentasi produk dan ilustrasi diagram yang tidak boleh kehilangan satu bagian pun, contain lebih aman walau muncul ruang kosong; beri latar netral pada kotaknya agar ruang kosong itu tampak disengaja. fill hampir tidak pernah menjadi pilihan sadar untuk foto, tetapi tetap berguna untuk konten yang memang bebas distorsi seperti gradasi warna atau pola. none paling sering dipakai bersama animasi atau sprite, ketika ukuran intrinsik gambar justru yang diinginkan.

Kombinasi object-fit: cover dengan bingkai ber-rasio (Chapter Aspect Ratio ) adalah pola yang paling sering kita tulis ulang; perlakukan keduanya sebagai satu paket.

object-position Menentukan Fokus #

cover dan none memangkas gambar secara simetris: default object-position adalah 50% 50%, pusat gambar. Ketika subjek penting tidak berada di tengah — wajah di kiri, langit di atas — object-position memindahkan jendela pemangkasan:

.kotak-cover img {
  object-fit: cover;
  object-position: top;      /* setara 50% 0% */
}

.kotak-cover-kanan img {
  object-fit: cover;
  object-position: 100% 50%; /* menempel di tepi kanan */
}

Nilainya dibaca seperti background-position: satu kata kunci (top, left bottom) atau sepasang persentase <x> <y>. Dengan object-position: top, bagian atas gambar yang tetap terlihat pada bingkai 16:9 — pola yang lazim untuk memotong foto pemandangan pada thumbnail berita. Demo memverifikasi salah satu nilai ini: object-position: top tercatat sebagai 50% 0% pada computed style.

Hasil di Browser:

Empat kotak 160×160 memuat gambar yang sama dengan object-fit berbeda:
fill meregangkan gambar menjadi gepeng (nilai computed "fill"),
cover mengisi penuh kotak dan memangkas sisi kiri-kanan ("cover"),
contain menyisakan ruang kosong di atas dan bawah ("contain"),
none menggambar pada ukuran asli 400×200 lalu memangkasnya ("none").
Kotak dengan object-position: top tercatat 50% 0% — bagian atas
gambar yang terlihat.

Demo lengkap membawa atribut data-expected pada keempat gambar, memverifikasi nilai computed object-fit dan object-position secara otomatis. Buka demo di browser untuk melihat perbedaan visualnya secara berdampingan.