The object-positionproperti digunakan bersama dengan object-fitproperti dan mendefinisikan bagaimana elemen seperti video atau gambar diposisikan dengan koordinat X / Y dalam konten-kotaknya. Properti ini mengambil dua nilai numerik, seperti 0 10%atau 0 10px. Dalam contoh tersebut, angka pertama menunjukkan bahwa gambar harus ditempatkan di sebelah kiri kotak konten (0), angka kedua harus ditempatkan 10% atau 10px dari atas. Dimungkinkan juga untuk menggunakan nilai negatif.
Nilai defaultnya object-positionadalah 50% 50%saat menggunakan object-fitproperti pada gambar, sehingga secara default semua gambar diposisikan di tengah kotak isinya, seperti ini:
img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )Demo
Di bawah ini adalah beberapa contoh tentang bagaimana kita dapat memanipulasi object-positiongambar dengan object-fitproperti disetel ke none. Jika konten gambar tidak mengisi kotak konten karena alasan apa pun maka ruang yang tidak terisi akan menampilkan latar belakang elemen, yang bisa berupa warna atau bahkan a background-image, seperti pada contoh terakhir:
Lihat posisi Objek Pena oleh Robin Rendle (@robinrendle) di CodePen.
Dukungan browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7.1 + * | 36+ | 26+ | ? | 4.4.4+ | 8.4 + * |
* Dukungan untuk object-fittetapi tidakobject-position