คุณสมบัติ object-fit ของ CSS

CSS object-fit คุณสมบัตินี้ใช้เพื่อกำหนดวิธีที่จะปรับขนาดของ <img> หรือ <video> ให้เข้ากับกล่องเนื้อหาของมัน

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางบอกว่าเป็นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด

คุณสมบัติ Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

คุณสมบัติ object-fit ของ CSS

CSS object-fit คุณสมบัตินี้ใช้เพื่อกำหนดวิธีที่จะปรับขนาดของ <img> หรือ <video> ให้เข้ากับกล่องเนื้อหาของมัน

คุณสมบัตินี้บอกว่าจะให้เนื้อหาในตัวแทนที่เต็มที่ตามวิธีต่าง ๆ ตามตัวเลือก อย่างเช่น "รักษาอัตราส่วน" หรือ "ขยายและใช้พื้นที่ที่เป็นไปได้ที่สุด"

โปรดดูภาพที่มาจากฝายหวั่นฮอกในเมืองเซี่ยงไฮ้ ซึ่งมีขนาด 300x300 พิกเซล:

ทุลิบ

แต่หากเราตั้งภาพที่สูง 200x300 พิกเซล มันจะดูเช่นนี้:

ทุลิบ

ตัวอย่าง

img {
  width: 200px;
  height: 300px;
}

ทดลองด้วยตัวเอง

เราจะเห็นว่าภาพถูกบีบเพื่อที่จะเข้ากับกล่องขนาด 200x300 พิกเซล และอัตราส่วนต้นแบบถูกทำลาย

หากเราใช้ object-fit: cover;จะตัดขอบภาพ รักษาอัตราส่วนของภาพ และเต็มที่ช่องว่าง แบบนี้:

กาแฟ

ตัวอย่าง

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

ทดลองด้วยตัวเอง

ตัวอย่างอื่น

ในนี่ เรามีภาพสองภาพ และเราอยากให้มันเต็มที่กว้าง 50% และสูง 100% ของหน้าต่างบราวเซอร์

ในตัวอย่างด้านล่างนี้ เราไม่ใช้ object-fitดังนั้น เมื่อเราปรับขนาดหน้าต่างบราวเซอร์ อัตราส่วนของภาพจะถูกทำลาย:

ตัวอย่าง

ทดลองด้วยตัวเอง

ในตัวอย่างต่อไปนี้ เราใช้ object-fit: cover;ดังนั้น เมื่อเราปรับขนาดหน้าต่างบราวเซอร์ จะรักษาอัตราส่วนของภาพตามไปด้วย:

ตัวอย่าง

ทดลองด้วยตัวเอง

ค่าทั้งหมดของคุณสมบัติ object-fit ของ CSS

object-fit คุณสมบัตินี้ยอมรับค่าต่อไปนี้：

  • fill - ค่าเริ่มต้นตามความคิดของคุณ ปรับขนาดของสิ่งที่แทนที่เพื่อที่จะเต็มที่กล่องเนื้อหาขององค์ประกอบ หากจำเป็น จะขยายหรือบีบตัวเพื่อที่จะเข้ากับองค์ประกอบนี้
  • contain - ย่อยขนาดของสิ่งที่แทนที่เพื่อที่จะรักษาอัตราส่วนของเงื่อนไข และใส่สิ่งที่แทนที่เข้าไปในกล่องเนื้อหาขององค์ประกอบ
  • cover - ปรับขนาดของสิ่งที่แทนที่เพื่อที่จะรักษาอัตราส่วนของเงื่อนไขที่เต็มที่ขององค์ประกอบเนื้อหา โดยที่จะตัดทอดให้เข้ากับองค์ประกอบเนื้อหานี้
  • none - ไม่ปรับขนาดเนื้อหาที่แทนที่
  • scale-down - ปรับขนาดเนื้อหาเหมือนที่ไม่ได้กำหนดเนื้อหาหรือเนื้อหาที่มี (จะทำให้ขนาดวัตถุเป็นเล็กกว่า)

ตัวอย่างด้านล่างนี้แสดง object-fit ค่าที่อาจมีของแคร์คิว

ตัวอย่าง

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

ทดลองด้วยตัวเอง