Mengenal Property Object Fit Pada CSS

Mengenal Property Object Fit Pada CSS - Kembali lagi membhasas mengenai CSS, kali ini saya akan membahas mengenai property Object Fit. Property yang mungkin jarang dibahas, tapi kali ini saya akan membahasnya.
Pernahkah kalian mengganti foto profil sosmed kalian? Jika gambar kalian melebihi ukuran kotak yang ditampilkan, maka gambar akan dipotong, agar pas dan tidak jelek. Nah, begitulah kurang lebih fungsi dari Object Fit. Contoh

• Tanpa Object Fit
  

Bisa dilihat dicontoh diatas, gambar akan diperbesar/dipotong jika menggunakan object fit sesuai lebar gambarnya. Berikut syntaxnya

object-fit: (cover, contain, fill, scale-down)

.
Contoh
HTML

<img src="image.jpg" width="200px" height="200px">

CSS (cover)

img {

object-fit: cover;

}

Hasilnya.


Itulah tutorial singkat mengenai object fit, silahkan dicoba-coba sendiri.
Sekian postingan saya yang berjudul Mengenal Property Object Fit Pada CSS.
Jangan lupa baca postingan saya sebelumnya Belajar Property CSS3 Transform.