Properti CSS object-fit digunakan untuk menentukan bagaimana <img> atau <video> harus diubah ukurannya atau tidak disesuaikan dengan containernya.
Section Artikel
Browser Pendukung
| Property | Google Chrome | Microsoft Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Properti CSS object-fit
Properti CSS object-fit digunakan untuk menentukan bagaimana atau
Properti ini memberi tahu konten untuk mengisi kontaner/wadahnya dengan berbagai cara; seperti “pertahankan rasio aspek” atau “rentangkan dan gunakan ruang sebanyak mungkin”.
Contoh :
<!DOCTYPE html> <html> <head> <style> img { width:200px; height:400px; } </style> </head> <body> <h2>Gambar tanpa object-fit</h2> <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" alt="Paris" width="400" height="300"> </body> </html>
Kita lihat bahwa gambar sedang diperkecil agar pas dengan wadah 200×400 piksel dan rasio aspek aslinya dihancurkan.
Jika kita menggunakan object-fit: cover; properti tersebut akan memotong sisi gambar, mempertahankan rasio aspek dan juga mengisi ruang, seperti ini:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:200px;
height:400px;
object-fit:cover;
}
</style>
</head>
<body>
<h2>Gambar menggunakan object-fit : cover</h2>
<img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Contoh lain
Di sini kita memiliki dua gambar dan kita akan mengisi lebar 50% dari jendela browser dan 100% dari tinggi.
Pada contoh berikut kita TIDAK menggunakan object-fit, jadi ketika kita mengubah ukuran jendela browser, rasio aspek gambar akan dihancurkan:
Contoh :
<!DOCTYPE html> <html> <body> <h2>Not Using object-fit</h2> Pada contoh berikut kita TIDAK menggunakan object-fit, jadi ketika kita mengubah ukuran jendela browser, rasio aspek gambar akan dihancurkan: <div style="width:100%;height:400px;"> <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="float:left;width:50%;height:100%;"> <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" alt="Pagoda" style="float:left;width:50%;height:100%;"> </div> </body> </html>
Dalam contoh berikutnya, kita akan gunakan object-fit:cover ;, jadi saat kita mengubah ukuran jendela browser, rasio aspek gambar dipertahankan:
Contoh :
<!DOCTYPE html> <html> <body> <h2>Using object-fit</h2> <p>Dalam contoh berikutnya, kita akan gunakan object-fit:cover ;, jadi saat kita mengubah ukuran jendela browser, rasio aspek gambar dipertahankan:</p> <div style="width:100%;height:400px;"> <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="float:left;width:50%;height:100%;object-fit:cover;"> <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" alt="Pagoda" style="float:left;width:50%;height:100%;object-fit:cover;"> </div> </body> </html>
Nilai Properti object-fit CSS
Properti object-fit dapat memiliki nilai sebagai berikut:
fill– Konten yang diganti berukuran untuk mengisi kotak konten elemen. Jika perlu, objek akan diregangkan atau ditekan agar pas.(default)contain– Konten yang diganti diskalakan untuk mempertahankan rasio aspeknya sambil menyesuaikan dengan kotak konten elemencover– Ukuran konten yang diganti untuk mempertahankan rasio aspeknya saat mengisi seluruh kotak konten elemen. Objek akan dipotong agar pasnone– Konten yang diganti tidak diubah ukurannyascale-down– Konten berukuran seolah-olah tidak ada atau berisi yang ditentukan (akan menghasilkan ukuran objek beton yang lebih kecil)
Contoh berikut menunjukkan semua nilai yang dari properti object-fit:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>
<h1>The object-fit Property</h1>
<h2>No object-fit:</h2>
<img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="width:200px;height:400px">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="width:200px;height:400px">
<h2>object-fit: contain:</h2>
<img class="contain" src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="width:200px;height:400px">
<h2>object-fit: cover:</h2>
<img class="cover" src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="width:200px;height:400px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="width:200px;height:400px">
<h2>object-fit: none:</h2>
<img class="none" src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gunung Fuji" style="width:200px;height:400px">
</body>
</html>
