Di artikel sebelumnya, saya telah membahas tentang gambar responsive dengan css3.
Sedangkan CSS object-fit adalah property css yang digunakan untuk <img> atau <video> supaya ukurannya bisa sesuai dengan box container.
Semua borwser modern mendukung property ini.
Ada lima value yang bisa digunakan untuk object-fit, berikut tabel daftarnya:
| Value | Keterangan |
|---|---|
| contain | Ukuran konten disesuaikan dengan aspect rasio maksimal di box container |
| cover | Gambar akan dikrop dan dijadikan cover (memenuhi) box |
| fill | Ini default. Gambar “dipaksa” untuk sesuai dengan ukuran yang ditentukan |
| none | Konten tidak diubah ukurannya |
| scale-down | Ukuran seolah-olah tidak ditentukan (ngefeknya kalau ukuran objek lebih kecil) |
Saya sendiri bingung ingin mendeskripsikan efeknya seperti apa. Biar lebih jelas langsung cek sendiri aja ya.
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
<h2>No object-fit:</h2>
<img src="https://halamansatu.biz/wp-content/uploads/2020/04/cara-mengatur-2d-transform-300x200.jpg" style="width:200px;height:400px">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="https://halamansatu.biz/wp-content/uploads/2020/04/cara-mengatur-2d-transform-300x200.jpg" style="width:200px;height:400px">
<h2>object-fit: contain:</h2>
<img class="contain" src="https://halamansatu.biz/wp-content/uploads/2020/04/cara-mengatur-2d-transform-300x200.jpg" style="width:200px;height:400px">
<h2>object-fit: cover:</h2>
<img class="cover" src="https://halamansatu.biz/wp-content/uploads/2020/04/cara-mengatur-2d-transform-300x200.jpg" style="width:200px;height:400px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="https://halamansatu.biz/wp-content/uploads/2020/04/cara-mengatur-2d-transform-300x200.jpg" style="width:200px;height:400px">
<h2>object-fit: none:</h2>
<img class="none" src="https://halamansatu.biz/wp-content/uploads/2020/04/cara-mengatur-2d-transform-300x200.jpg" style="width:200px;height:400px">
No object-fit:
object-fit: fill (this is default):
object-fit: contain:
object-fit: cover:
object-fit: scale-down:
object-fit: none: