Sifat object-fit

Sifat object-fit menentukan nisbah aspek atau penskalaan elemen seperti imej atau video.

Sintaks

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

Jadual berikut menunjukkan nilai-nilai utama untuk sifat object-fit:

Nilai	Keterangan
`fill`	Penskalaan elemen untuk memadankan saiz yang ditetapkan, sementara nisbah aspek elemen diabaikan.
`contain`	Penskalaan elemen untuk memadankan saiz yang ditetapkan, sementara nisbah aspek elemen dikekalkan.
`cover`	Saiz elemen diubah untuk memenuhi sepenuhnya kawasan yang ditentukan, sementara nisbah aspek elemen itu sendiri dikekalkan.
`none`	Saiz asal elemen dikekalkan.

Mari kita tetapkan imej kita untuk memenuhi saiz yang ditentukan tanpa mengekalkan nisbah aspek:

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

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

Sekarang mari kita buat supaya imej memenuhi bekas yang ditentukan sambil mengekalkan nisbah aspek:

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

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

Mari kita penuhkan bekas yang ditentukan dengan imej kita supaya saiz imej itu sendiri berubah, tetapi nisbah aspeknya dikekalkan:

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

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

Mari kita letakkan imej kita ke dalam bekas yang ditentukan sambil mengekalkan saiz asalnya:

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

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