คุณสมบัติ object-fit

คุณสมบัติ object-fit กำหนด สัดส่วนภาพหรือการปรับขนาด ขององค์ประกอบเช่นรูปภาพ หรือวิดีโอ

ไวยากรณ์

ตัวเลือก {
	object-fit: fill หรือ contain หรือ cover หรือ none;
}

ตารางด้านล่างแสดงค่าหลักสำหรับ คุณสมบัติ object-fit:

ค่า	คำอธิบาย
`fill`	ปรับขนาดองค์ประกอบให้ตรงกับขนาดที่กำหนด โดยไม่รักษาสัดส่วนเดิมขององค์ประกอบ
`contain`	ปรับขนาดองค์ประกอบให้ตรงกับขนาดที่กำหนด โดยรักษาสัดส่วนเดิมขององค์ประกอบ
`cover`	ปรับขนาดองค์ประกอบเพื่อเติมเต็ม พื้นที่ที่กำหนดทั้งหมด โดยรักษาสัดส่วน เดิมขององค์ประกอบ
`none`	รักษาขนาดเดิมขององค์ประกอบ

มาทำให้รูปภาพของเราเติมเต็ม พื้นที่ขนาดที่กำหนดโดยไม่รักษา สัดส่วนกัน:

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

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

คราวนี้มาทำให้รูปภาพเติมเต็ม คอนเทนเนอร์ที่กำหนดโดยรักษา สัดส่วน:

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

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

มาทำให้รูปภาพของเราเติมเต็ม คอนเทนเนอร์ที่กำหนด โดยปรับขนาดของรูปภาพเอง แต่ยังรักษาสัดส่วนของมัน ไว้:

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

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

มาวางรูปภาพของเรา ในคอนเทนเนอร์ที่กำหนดโดยรักษา ขนาดเดิมของมัน:

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

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