Kedudukan objek - Trik CSS | CSS Almanac 2025

The object-positionharta yang digunakan bersama dengan object-fitharta dan mentakrifkan bagaimana elemen seperti video atau imej ini diletakkan dengan koordinat X / Y yang di dalam kandungan-kotak. Properti ini mengambil dua nilai berangka, seperti 0 10%atau 0 10px. Dalam contoh tersebut, angka pertama menunjukkan bahawa gambar harus diletakkan di sebelah kiri kotak isi (0), yang kedua mesti diletakkan 10% atau 10 piksel dari atas. Mungkin juga menggunakan nilai negatif.

Nilai lalai object-positionadalah 50% 50%ketika menggunakan object-fitproperti pada gambar, sehingga secara lalai semua gambar diletakkan di tengah kotak kandungannya, seperti:

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 bagaimana kita dapat memanipulasi object-positiongambar dengan object-fitsifat yang ditetapkan none. Sekiranya kandungan gambar tidak mengisi kotak kandungan dengan alasan apa pun, maka ruang yang tidak diisi akan menunjukkan latar belakang elemen, yang boleh menjadi warna atau bahkan background-image, seperti pada contoh terakhir:

Lihat kedudukan Objek Pen oleh Robin Rendle (@robinrendle) di CodePen.