Hai teman-teman kembali lagi pada artikel saya, kali ini saya akan membahas tema yang sama dari artikel-artikel sebelumnya yaitu tentang property-property pada css. Sekarang saya akan membahas sebuah property yang jarang sekali di bahas oleh website atau blog indonesia yaitu mengenai property Object-fit.
Obeject-fit sendiri adalah sebuah property pada css untuk mengatur elemen tinggi dan lebar suatu gambar pada kotaknya, Maksudnya seperti apa ? pernah tidak kalian mengganti profile picture di blackberry massangger atau media sosial yang lainya ? di bbm biasanya jika foto atau gambar kita terlalu besar maka kita mau tidak mau haris mengcrop atau memotong gambar kita terlebih daulu agar bisa di jadikan profile picture. Nah dengan css object-fit inilah kita juga bisa mengatur ukuran gambar dari sebuah kotaknya. Kalau masih bingung kita langsung praktek saja ya
Pada object-fit terdapat value yang bisa kita gunakan yaitu :
object-fit:fill
object-fit:contain
object-fit:cover
object-fit:scale down
ini gambar aslinya :
Contoh saya menggunakan gambar berada di dalam kotak tanpa menggunakan object-fit:
.fit {
border: 5px solid maroon;
width: 10em;
height: 10em;
}
Lalu satu persatu saya akan berikan penggunaan object-fit,
object-fit : fill
object-fit : contain
object-fit: cover
object-fit : scale-down
Nah silahkan kalian perhatikan dengan sangan cermat letak perbedaaanya pada gambar tersebut agar bisa memahami kegunaan dari property object-fit pada css. OKe sekian dulu ya semoga bermanfaat.
Terimakasih.