CSS object-position 属性

Definisi dan penggunaan

Penggunaan atribut object-position bersamaan dengan object-fit untuk menentukan cara penggunaan koordinat x/y untuk menempatkan <img> atau <video> di dalam kotak konten 'sendiri'.

Lihat juga:

Panduan pelajaran CSS:object-fit CSS

Panduan referensi CSS:object-position CSS

Panduan referensi HTML DOM:Atribut objectPosition

Contoh

Atur ukuran gambar untuk sesuai dengan kotak konten, dan gerakkan posisi gambar di dalam kotak konten dari kiri ke 5px, dari atas ke 10%:

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

Coba sendiri

Sintaksis CSS

object-position: posisi|initial|inherit;

Nilai atribut

Nilai Deskripsi
posisi

Tentukan posisi gambar atau video di dalam kotak konten.

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

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

Detil teknis

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

Dukungan browser

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

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0