properti object-position CSS

CSS object-position sifat digunakan untuk menentukan lokasi <img> atau <video> di dalam kontainernya.

imej

Lihat gambar di bawah ini yang berasal dari Wuhan, berukuran 600x400 pixel:

武汉

Selanjutnya, kami menggunakan object-fit: cover; untuk mempertahankan proporsi lebar dan tinggi serta memenuhi ukuran yang diberikan. Namun, imej akan dipotong untuk sesuai dengan, seperti yang ditunjukkan di bawah:

武汉

contoh

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

coba sendiri

menggunakan sifat object-position

Dahulunya, bagaimana jika bagian imej yang ditampilkan bukan tempat yang kami inginkan. Untuk menempatkan imej, kami akan menggunakan object-position sifat.

Di sini, kami akan menggunakan object-position sifat untuk menempatkan imej, supaya bangunan kuno berada di tengah:

武汉

contoh

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

coba sendiri

Di sini, kami akan menggunakan object-position aturan untuk menempatkan imej, supaya gedung menara di pusat kiri:}

武汉

contoh

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

coba sendiri

aturan CSS object-*

tabel di bawah ini menunjukkan properti CSS object-*:

aturan deskripsi
object-fit tetapkan bagaimana <img> atau <video> harus disesuaikan saiz untuk melengkapi kontainer.
object-position tetapkan <img> atau <video> bagaimana ia harus diletakkan di dalam kotak kandungan sendiri melalui koordinat x/y.