Properti object-fit: cover; memotong gambar agar pas memenuhi ukuran kotak tanpa gepeng atau terdistorsi.
CSS object-fit
Contoh Kode CSS object-fit:
<!DOCTYPE html>
<html>
<head>
<style>
.kotak-fit {
width: 200px;
height: 150px;
border: 2px solid #0d2e5c;
object-fit: cover;
border-radius: 8px;
}
</style>
</head>
<body>
<p>object-fit: cover (Proporsional tidak gepeng):</p>
<img src="https://picsum.photos/500/200" class="kotak-fit">
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS object-fit mengubah tampilan elemen di atas.