CSS3 Object Fit

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:

ValueKeterangan
containUkuran konten disesuaikan dengan aspect rasio maksimal di box container
coverGambar akan dikrop dan dijadikan cover (memenuhi) box
fillIni default. Gambar “dipaksa” untuk sesuai dengan ukuran yang ditentukan
noneKonten tidak diubah ukurannya
scale-downUkuran 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://puntadewa.my.id/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://puntadewa.my.id/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://puntadewa.my.id/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://puntadewa.my.id/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://puntadewa.my.id/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://puntadewa.my.id/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:

Leave a Comment