Properti posisi objek CSS
Contoh
Ubah ukuran gambar agar sesuai dengan kotak kontennya, dan posisikan gambar 5px dari kiri dan 10% dari atas di dalam kotak konten:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Definisi dan Penggunaan
Properti object-position
ini digunakan bersama dengan object-fit untuk menentukan bagaimana <img> atau <video> harus diposisikan dengan koordinat x/y di dalam "kotak konten sendiri".
Nilai bawaan: | 50% 50% |
---|---|
Diwarisi: | Ya |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.objectPosition="0 10%" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Sintaks CSS
object-position: position|initial|inherit;
Nilai properti
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Halaman Terkait
Tutorial CSS: Kesesuaian objek CSS
Referensi CSS: CSS objek-fit
Referensi DOM HTML: Properti objectPosition