Mengetahui Properti CSS Object Fit dan Position

Dalam postingan kali ini kita akan membahas postingan tentang dua properti CSS yang tidak banyak developer web ketahui. Dua properti tersebut adalah object-fit dan object-position dan keduanya harus dilakukan dengan styling gambar dan video.

Pertama, kita akan menunjukan kepada Anda bagaimana menggunakannya dan membahasnya secara detail yang mencakup semua spesifikasi penting. Setelah itu, kami telah menyiapkan demo kecil dimana Anda dapat memainkan properti dan melihatnya beraksi. Lets go mari kita mulai…..

Object-fit

Dengan object-fit kita bisa mengatasi bagaimana sebuah gambar (atau video) membesar atau mengecilkannya sendiri untuk mengisi box konten. Hal ini diperlukan ketika sebuah foto yang kita miliki mempunyai ukuran atau aspek yang berbeda rasio dari tempat yang ditunjuk sebagai sebuah layout.

Secara tradisional, untuk memecahkan masalah ini kita akan membuat div dan mengatur background-image dan background-size. CSS modern bagaimanapun memungkinkan kita untuk menambahkan tag gambar, mengatur source tersebut secara biasa dan kemudian menerapkan object-fit langsung ke selector image:

img {
    width: 100%;
    object-fit: cover;
}

Kemungkinan value yang diterima adalah :

• Fill (default) – lebar dan tinggi gambar sesuai dengan kotak. Sebagian besar waktu akan mengacaukan aspek rasionya.
• Cover – gambar menyimpan aspek rasio dan mengisi seluruh kotak, bagian itu terpotong dan tidak akan ditampilkan.
• Contain – gambar menyimpan aspek rasio dan membesar/menyusut untuk memuat didalam kotak.
• None – ukuran asli dan aspek rasio
• Scale-down – menampilkan seperti salah satu diatas, bergantung pada yang menghasilkan ukuran gambar terkecil.

Object-position

Properti ini mendefinisikan keberadaan dalam wadah gambar akan diposisikan. Dibutuhkan dua nilai numerik, satu untuk sumbu atas-bawah dan satu lagi untuk sumbu kiri-kanan.

Angka-angka ini bisa dalam presentase, pixel atau unit pengukuran lainnya, dan dapat bernilai negatif. Beberapa kata kunci seperti center, top, right, dll dapat digunakan juga.

Secara default gambar diposisikan ditengah wadah, sehingga nilai defaultnya adalah :

img {
    object-position: center;
    /* which equals */
    object-position: 50% 50%;
}

Playground Demo

Dibawah ini adalah halaman demo yang akan membantu Anda mendapatkan pemahaman tentang object-fit dan object-position dalam waktu singkat. Didalamnya Anda dapat menguji properti dan memberi value yang berbeda untuk melihat bagaimana properti tersebut dapat mengubah objek media. Jangan takut untuk membuka DevTool juga.

Browser Support

Mengikuti tradisi semua fitur keren CSS,browser support untuk object-fit dan object-position agak tidak konsisten dan dalam hal ini karena IE dan Edge tidak support sama sekali. Sambil menunggu semua browser Microsoft untuk mengadopsi kedua properti Anda dapat menggunakan polyfill ini untuk mengatasi masalah dengan baik. Juga, itu menjadi ide yang baik untuk mengatur warna background untuk semua wadah image sebagai fallback.

Kesimpulan

Properti object-fit dan object-position dapat sangat membantu ketika membangun halaman web responsif. Keduanya mudah diingat dan digunakan, dan bekerja dengan sempurna. Kami yakin sekali IE dan Edge mengadopsi mereka dengan cepat akan menjadi bagian dari toolbox CSS setiap web developer. Terimakasih sudah membaca semoga bermanfaat

DEMO

Comments

comments