Properti object-position CSS

Definisi dan penggunaan

Atribut object-position digunakan bersamaan dengan object-fit untuk menentukan cara penggunaan koordinat x/y untuk menempatkan <img> atau <video> di dalam kotak konten "pribadi".

Lihat juga:

Panduan pelajaran CSS:object-fit CSS

Panduan referensi CSS:object-position CSS

Panduan referensi HTML DOM:Atribut objectPosition

Contoh

Tahapkan ukuran gambar untuk memadai kotak konten, dan gerakkan posisi gambar di dalam kotak konten dari kiri 5px dan dari atas 10%:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

Coba sendiri

Sintaksis CSS

object-position: position|initial|inherit;

Nilai atribut

Nilai Deskripsi
position

Tentukan posisi gambar atau video di dalam kotak konten.

Nilai pertama mengendalikan sumbu x, nilai kedua mengendalikan sumbu y.

Bisa berupa string (kiri, tengah atau kanan) atau angka (dengan satuan px atau %). Perbolehkan nilai negatif.
initial Atur atribut ini ke nilai default. Lihat: initial.
inherit Mengambil atribut ini dari elemen orangtua. Lihat: inherit.

Detil teknis

Nilai default: 50% 50%
Turunan: ya
Pembuatan animasi: Dukung. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Sintaksis JavaScript: object.style.objectPosition="0 10%"

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuh.

IE / Edge Firefox Safari Opera Tentang CodeW3C.com
31.0 16.0 36.0 10.0 19.0