Jenis Object Fit pada CSS

Pada artikel sebelumnya kita sudah membahas sedikit mengenai object fit pada CSS. Namun hanya menjelaskan bahwa dengan object fit tersebut dapat menyesuaikan ukuran gambar agar tidak terlihat pecah saat ukuran dikecilkan. Sekarang masih membahas tentang object fit, namun ada beberapa jenis object fit pada CSS yang belum kalian ketahui sebelumnya. Untuk itu mari simak penjelasan berikut ini.

Pada object fit terdapat beberapa jenis yang bisa kalian gunakan untuk mengatur agar gambar kalian sesuai dengan keinginan. Dengan adanya perintah object fit ini, maka gambar dengan sendirinya akan menyesuaikan ukuranya. Kendala saat membangun website adalah saat kita memiliki gambar dengan ukuran besar, lalu saat dibuka dengan handphone, maka gambar akan terlihat dengan ukuran aslinya, tentu sangat mengganggu bagi user. Kemudian kendala juga muncul apabila gambar kita atur ukuranya menggunakan persen (%). Gambar bisa menyesuaikan, namun menjadi terlihat gepeng.

Maka dari itu perlu kalian tambahkan perintah object fit agar semua masalah tersebut dapat teratasi dengan kondisi tertentu. Caranya bagaimana ? kalian bisa ikuti simulasi berikut ini.

objek.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Jenis Object-fit pada CSS</h1>
<p>Tiap kotak merah diberi ukuran lebar 200px dan padding 20px</p>

<div class="">
	<h2>Ukuran Gambar Asli:</h2>
	<img src="kapal.jpg" alt="Paris">	
</div><br><br>
<div class="kotak">
	<h2>Jenis Contain:</h2>
	<img src="kapal.jpg" alt="Paris" class="contain">	
</div>
<div class="kotak">
	<h2>Jenis Cover:</h2>
	<img src="kapal.jpg" alt="Paris" class="cover">	
</div>
<div class="kotak">
	<h2>Jenis Scale-down:</h2>
	<img src="kapal.jpg" alt="Paris" class="scale-down">	
</div>
<div class="kotak">
	<h2>Jenis Fill:</h2>
	<img src="kapal.jpg" alt="Paris" class="fill">	
</div>

</body>
</html>

style.css

.fill {object-fit: fill;width: 200px;height: 200px;}
.contain {object-fit: contain; width: 200px;height: 200px;}
.cover {object-fit: cover; width: 200px;height: 200px;}
.scale-down {object-fit: scale-down; width: 200px;height: 200px;}
.none {object-fit: none; width: 200px;height: 200px;width: 200px;height: 200px;}
.kotak{float:left; width:200px; padding:20px; background: red; margin-right: 20px;}

setelah sudah kalian simpan. Dan buka file tersebut pada browser untuk melihat hasilnya. Jika berhasil maka tampilanya akan seperti ini.

Pada gambar terlihat jelas perbedaan antara jenis object fit satu sama lain. Dengan mengetahui jenis dan kegunaanya, diharapkan kalian bisa sesuaikan dengan kebutuhan website kalian. Mudah bukan ?

Sekian pembahasan mengenai jenis object fit pada CSS. Semoga artikel kali ini bermanfaat dan dapat menginspirasi kalian semua untuk terus menambah wawasan dibidang pemrograman website.