Cara membuat ukuran gambar dengan CSS object-fit

Kegunaan CSS object-fit

Pada CSS3 terdapat fitur baru yaitu properti object-fit. Dengan properti object-fit ini Anda bisa menggunakannya untuk menentukan bagaimana <img> atau <video> harus diubah ukurannya agar sesuai dengan wadahnya seperti “pertahankan rasio aspek” dan mengambil ruang sebanyak mungkin”.

Contoh menggunakan object-fit pada gambar

Pada contoh dibawah ini kita akan memberikan style berupa tinggi dan lebar pada gambar, dan kita bandingkan yang satu menggunakan properti object-fit dengan nilai cover dan yang satunya tanpa menggunakan object-fit. Dengan begitu kita bisa melihat perbedaanya.

#gambar1 {
    width: 70%;
    height: 300px;
}
#gambar2 {
    width: 70%;
    height: 300px;
    object-fit: cover;
}

Nilai properti object-fit

Pada contoh diatas kita sudah menggunakan properti object-fit dengan nilai cover. Perlu Anda ingat bahwa properti object-fit bisa mempunyai nilai selain cover seperti:

• fill – Ini standar. Konten yang diganti akan berukuran untuk mengisi kotak konten elemen. Jika perlu, objek akan diregangkan atau ditekan agar sesuai
• contain – Konten yang diganti diskalakan untuk mempertahankan rasio aspeknya sementara didalam kotak konten elemen
• cover – Konten yang diganti berukuran untuk mempertahankan rasio aspeknya sambil mengisi seluruh kotak konten elemen. Objek akan dipotong agar sesuai
• none – Konten yang diganti tidak diubah ukurannya
• scale-down – Konten berukuran seolah-olah tidak ada

Contoh berikut menunjukkan semua nilai dari properti object-fit:

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}