Properti object-position CSS
- Hal Sebelumnya object-fit CSS
- Hal Berikutnya Masquerade CSS
CSS object-position properti digunakan untuk menentukan posisi <img> atau <video> di dalam kontainernya.
gambar
Lihat gambar di bawah ini yang berasal dari Wuhan, berukuran 600x400 pixel:
Selanjutnya, kami menggunakan object-fit: cover; untuk mempertahankan aspek ratio dan mengisi ukuran yang diberikan. Namun, gambar akan dipotong untuk menyesuaikan, seperti yang ditunjukkan di bawah ini:
Contoh
img {
width: 266px;
height: 400px;
object-fit: cover;
}
menggunakan properti object-position
Dengan asumsi bagian gambar yang ditampilkan bukan tempat yang kita inginkan. Untuk menempatkan gambar, kami akan menggunakan object-position properti.
Disini, kami akan menggunakan object-position properti untuk menempatkan gambar, sehingga bangunan kuno berada di tengah:
Contoh
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Disini, kami akan menggunakan object-position Guna properti untuk menempatkan gambar, sehingga terkenal menara gurun di sisi kanan:
Contoh
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
Properti CSS object-*
Tabel di bawah ini menampilkan properti CSS object-*:
| Properti | Deskripsi |
|---|---|
| object-fit | Tentukan bagaimana <img> atau <video> harus disesuaikan ukurannya untuk memadai kontainernya. |
| object-position | Tentukan bagaimana <img> atau <video> harus dilekatkan di dalam kotak konten sendiri melalui koordinat x/y. |
- Hal Sebelumnya object-fit CSS
- Hal Berikutnya Masquerade CSS
