Object Position

object-fit: cover menjawab pertanyaan “bagaimana kotak terisi”, tetapi belum menjawab “bagian mana dari gambar yang dipertahankan”. Secara default, browser memotong dari tengah — padahal bagian penting sebuah foto sering tidak berada di tengah: wajah biasanya di sepertiga atas, matahari terbenam di sudut, logo di kiri bawah. Property object-position memberi kendali titik fokus itu, dan pasangan object-fit: cover + object-position menjadi kombinasi wajib untuk thumbnail yang potongannya disengaja, bukan kebetulan.

Cara Menulis Nilai object-position #

Nilai object-position terdiri dari satu atau dua komponen: posisi horizontal dan posisi vertikal. Bila hanya satu yang ditulis, sumbu kedua otomatis center. Nilai default-nya 50% 50% — potongan tengah yang selama ini kita lihat.

.thumb-cover {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: top;
}

Bandingkan potongan tengah dengan potongan atas pada pemandangan yang sama:

Cara menulis posisi yang tersedia:

Mekanisme persentase penting untuk dipahami: nilai 25% 75% tidak menggeser gambar sejauh 25% kotak, melainkan menyandingkan titik 25% pada gambar dengan titik 25% pada kotak. Karena kedua sisi memakai acuan yang sama, potongannya tetap proporsional di ukuran kotak apa pun. Konsep ini identik dengan background-position pada section Warna, Background, dan Borders — object-position adalah padanannya untuk konten di dalam img dan video.

Pemandangan berikut isinya tersebar — matahari di kanan atas, dua bukit di tengah, padang hijau di bawah — sehingga perbedaan object-position langsung kelihatan. Keempat kotak memakai object-fit: cover yang sama, hanya object-position-nya yang berbeda:

Empat tampilan berbeda dari satu berkas gambar — tanpa menyentuh berkasnya sama sekali.

Focal Point: Mengarahkan Pandangan #

Dalam praktiknya, object-position paling sering dipakai untuk focal point: titik yang wajib terlihat pada foto. Wajah orang umumnya berada di sepertiga atas bingkai, sehingga potongan tengah pada kotak persegi sering memotong dahi atau rambut:

.foto-wawancara {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 20%;
}

Lihat bedanya pada potret dengan wajah di sepertiga atas:

Menyesuaikan satu angka persen jauh lebih cepat daripada memotong ulang gambar di editor, terutama bila gambar diunggah oleh pengguna dengan bentuk yang tak terduga.

Bekerja Juga tanpa cover #

Meskipun paling sering dipasangkan dengan cover, object-position tetap bekerja pada nilai object-fit lain. Pada contain, gambar utuh diletakkan di dalam kotak yang lebih besar, dan object-position menentukan sudut mana yang ditempatinya — contain dengan object-position: bottom menaruh gambar di dasar kotak dan menyisakan ruang kosong di atasnya. Dengan kata lain: object-fit menentukan ukuran konten, object-position menentukan tempatnya.

Ringkasan #

object-position melengkapi object-fit: cover dengan kendali arah potongan: kata kunci untuk posisi cepat, persen untuk titik fokus yang presisi, dan panjang untuk penempatan tetap. Dengan dua property ini, satu berkas gambar bisa melayani banyak kotak dengan fokus yang berbeda-beda. Kotaknya sendiri sejauh ini masih kita bentuk dengan width dan height eksplisit — chapter berikutnya memperkenalkan aspect-ratio, cara menuliskan bentuk kotak sebagai perbandingan sehingga rasio terjaga bahkan sebelum kontennya datang.