Properti object-fit

Properti object-fit mengatur rasio aspek atau penskalaan elemen seperti gambar atau video.

Sintaks

selektor {
	object-fit: fill atau contain atau cover atau none;
}

Tabel berikut menampilkan nilai-nilai utama untuk properti object-fit:

Nilai	Deskripsi
`fill`	Menskalakan elemen agar sesuai dengan ukuran yang ditentukan, namun rasio aspek elemen diabaikan.
`contain`	Menskalakan elemen agar sesuai dengan ukuran yang ditentukan, dengan mempertahankan rasio aspek elemen.
`cover`	Ukuran elemen diubah untuk memenuhi sepenuhnya area yang ditentukan, sambil mempertahankan rasio aspek elemen itu sendiri.
`none`	Ukuran asli elemen dipertahankan.

Mari kita atur gambar kita untuk mengisi ukuran yang ditentukan tanpa mempertahankan rasio aspek:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Sekarang mari kita buat gambar memenuhi wadah yang ditentukan dengan mempertahankan rasio aspek:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Mari kita isi wadah yang ditentukan dengan gambar kita sehingga ukuran gambar itu sendiri berubah, tetapi rasio aspeknya dipertahankan:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Mari kita tempatkan gambar kita ke dalam wadah yang ditentukan dengan mempertahankan ukuran aslinya:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}