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 sesuaicontain
– Konten yang diganti diskalakan untuk mempertahankan rasio aspeknya sementara didalam kotak konten elemencover
– Konten yang diganti berukuran untuk mempertahankan rasio aspeknya sambil mengisi seluruh kotak konten elemen. Objek akan dipotong agar sesuainone
– Konten yang diganti tidak diubah ukurannyascale-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;}