CSS Properti posisi objek
Properti CSS object-position
digunakan untuk menentukan bagaimana <img> atau <video> harus diposisikan di dalam wadahnya.
Foto
Lihatlah gambar berikut dari Paris, yaitu 400x300 piksel:
Selanjutnya, kita gunakan object-fit: cover;
untuk menjaga rasio aspek dan untuk mengisi dimensi yang diberikan. Namun, gambar akan dipotong agar pas, seperti ini:
Contoh
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Menggunakan Properti posisi objek
Katakanlah bagian dari gambar yang ditampilkan, tidak diposisikan seperti yang kita inginkan. Untuk memposisikan gambar, kita akan menggunakan object-position
properti.
Di sini kita akan menggunakan object-position
properti untuk memposisikan gambar sehingga bangunan tua yang besar berada di tengah:
Contoh
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Di sini kita akan menggunakan object-position
properti untuk memposisikan gambar sehingga Menara Eiffel yang terkenal berada di tengah:
Contoh
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
Objek CSS-* Properti
Tabel berikut mencantumkan properti objek-* CSS:
Property | Description |
---|---|
object-fit | Specifies how an <img> or <video> should be resized to fit its container |
object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |