html-css

CSS object-fit

Apa itu CSS object-fit?

Property CSS object-fit digunakan untuk menentukan bagaimana tag <img> atau <video> diubah ukurannya agar sesuai dengan wadah atau containernya.

Beberapa value dari object-fit diantaranya :

• fill
• contain
• cover
• scale-down
• none

Studi kasus :

Gambar yang akan digunakan :

object-fit: cover;

Gambar akan mempertahankan aspek rasionya dan memenuhi dimensi yang diberikan, lalu gambar akan dipotong agar menyesuaikan wadah atau containernya :

Sintaksis :

<img class="cover" src="natures.jpg" alt="..." />

img {
	width: 300px;
	height: 400px;
	border: 2px solid blue;
}

.cover {
	object-fit: cover;
}

object-fit: fill;

Gambar akan diubah ukurannya untuk memenuhi dimensi yang diberikan. Jika perlu, gambar akan direnggangkan agar menyesuaikan wadah atau containernya :

Sintaksis :

<img class="fill" src="natures.jpg" alt="..." />

img {
	width: 300px;
	height: 400px;
	border: 2px solid blue;
}

.fill {
	object-fit: fill;
}

object-fit: contain;

Gambar akan mempertahankan aspek rasionya, tetapi diubah ukurannya agar sesuai dengan dimensi yang diberikan :

Sintaksis :

<img class="contain" src="natures.jpg" alt="..." />

img {
	width: 300px;
	height: 400px;
	border: 2px solid blue;
}

.contain {
	object-fit: contain;
}

object-fit: scale-down;

Gambar akan diperkecil ke versi terkecil dari gambar tersebut :

Sintaksis :

<img class="scale-down" src="natures.jpg" alt="..." />

img {
	width: 300px;
	height: 400px;
	border: 2px solid blue;
}

.scale-down {
	object-fit: scale-down;
}

object-fit: none;

Gambar tidak akan diubah ukurannya dan tetap dengan ukuran aslinya :

Sintaksis :

<img class="none" src="natures.jpg" alt="..." />

img {
	width: 300px;
	height: 400px;
	border: 2px solid blue;
}

.none {
	object-fit: none;
}

Referensi

Untuk referensi lengkapnya, kalian bisa mengunjungi website berikut:

• MDN Web Docs
• W3Schools

This site is open source. Improve this page.