คุณสมบัติ CSS วัตถุพอดีปรับขนาดองค์ประกอบให้อยู่ภายในความกว้างและความสูงของคอนเทนเนอร์ที่อยู่ในนั้น ภาพพื้นหลังเป็นองค์ประกอบทั่วไปที่สุดที่คุณจะเจอในฐานะนักพัฒนาที่ใช้คุณสมบัตินี้
มีค่าที่เป็นไปได้ห้าค่าสำหรับคุณสมบัติพอดีกับวัตถุ เราจะใช้รูปภาพเป็นตัวอย่างในการแสดงค่าต่างๆ:
- วัตถุพอดี:มี – เมื่อใช้คอนเทนเนอร์ อัตราส่วนกว้างยาวขององค์ประกอบที่อยู่ในคอนเทนเนอร์ (รูปภาพในตัวอย่างนี้) จะยังคงอยู่ หากอัตราส่วนไม่ตรงกัน คุณจะเห็นแถบ (คิดว่าเมื่อใดที่วิดีโอแบบจอกว้างออกและในโทรทัศน์รุ่นเก่า คุณจะเห็นแถบที่ด้านบนและด้านล่างของหน้าจอ) ที่ด้านใดก็ตามอัตราส่วนไม่ตรงกัน
- วัตถุพอดี:ปก – หน้าปกจะรักษาอัตราส่วนภาพในขณะที่เติมเนื้อหาลงในช่องเนื้อหา หากอัตราส่วนภาพไม่ตรงกัน รูปภาพจะถูกตัดให้พอดี
- วัตถุพอดี:เติม – รูปภาพจะถูกปรับขนาดในกรณีนี้เพื่อเติมเต็มกล่องเนื้อหาขององค์ประกอบ ไม่ว่าอัตราส่วนภาพเดิมจะตรงกันหรือไม่ก็ตาม นี่อาจจะยืดภาพให้พอดี
- วัตถุพอดี:ไม่มี – รูปภาพจะคงขนาดเดิมไว้
- วัตถุพอดี:ลดขนาด – คุณสมบัติลดขนาดจะเลือก ไม่มี . อย่างใดอย่างหนึ่งโดยอัตโนมัติ หรือ บรรจุ แล้วแต่ว่าจะทำให้ขนาดภาพโดยรวมเล็กลง ในกรณีนี้ การลดขนาดจะเลือก มี :
การสนับสนุนเบราว์เซอร์ค่อนข้างแพร่หลายสำหรับคุณสมบัตินี้ ตรวจสอบการสนับสนุนอีกครั้งหากคุณกำลังพัฒนาเบราว์เซอร์ Internet Explorer, Microsoft Edge หรือ Opera รุ่นเก่า
บทสรุป
ในบทความนี้ เรามาดูคุณสมบัติของ object-fit ใช้กับองค์ประกอบที่สามารถแทรกและเติมภาชนะได้ คุณสมบัตินี้ใช้โดยตรงกับ หรือองค์ประกอบที่ถูกแทนที่อื่นๆ เพื่อควบคุมวิธีการเติม
ในคอนเทนเนอร์ ใช้คุณสมบัติ object-fit ร่วมกับคุณสมบัติ object-position เพื่อควบคุมวิธีการแสดงองค์ประกอบในคอนเทนเนอร์
