CSS The object-fit Property
คุณสมบัติ CSS object-fitใช้เพื่อระบุว่าควรปรับขนาด <img> หรือ <วิดีโอ> อย่างไรให้พอดีกับคอนเทนเนอร์
CSS object-fit Property
คุณสมบัติ CSS object-fitใช้เพื่อระบุว่าควรปรับขนาด <img> หรือ <วิดีโอ> อย่างไรให้พอดีกับคอนเทนเนอร์
คุณสมบัตินี้บอกให้เนื้อหาเติมคอนเทนเนอร์ได้หลายวิธี เช่น "รักษาอัตราส่วนภาพนั้นไว้" หรือ "ยืดและใช้พื้นที่ให้มากที่สุด"
ดูภาพต่อไปนี้จากปารีส รูปภาพนี้มีความกว้าง 400 พิกเซลและสูง 300 พิกเซล:
อย่างไรก็ตาม หากเราจัดรูปแบบรูปภาพด้านบนให้มีความกว้างครึ่งหนึ่ง (200 พิกเซล) และความสูงเท่ากัน (300 พิกเซล) จะมีลักษณะดังนี้:
ตัวอย่าง
img {
width: 200px;
height:
300px;
}
เราเห็นว่ารูปภาพถูกบีบอัดเพื่อให้พอดีกับคอนเทนเนอร์ขนาด 200x300 พิกเซล (อัตราส่วนภาพดั้งเดิมจะถูกทำลาย)
นี่คือที่object-fitมาของobject-fitคุณสมบัติ คุณสมบัติสามารถรับค่าใดค่าหนึ่งต่อไปนี้:
fill- นี่เป็นค่าเริ่มต้น รูปภาพถูกปรับขนาดเพื่อเติมเต็มมิติที่กำหนด หากจำเป็น ภาพจะถูกยืดหรือบีบให้พอดีcontain- รูปภาพคงอัตราส่วนไว้ แต่ถูกปรับขนาดให้พอดีกับขนาดที่กำหนดcover- รูปภาพจะคงอัตราส่วนไว้และเติมเต็มมิติที่กำหนด ภาพจะถูกตัดให้พอดีnone- รูปภาพไม่ได้ปรับขนาดscale-downnone- รูปภาพถูกย่อขนาดเป็น or . เวอร์ชันที่เล็กที่สุดcontain
ใช้วัตถุพอดี: ปก;
หากเราใช้object-fit: cover;รูปภาพจะคงอัตราส่วนภาพและเติมมิติที่กำหนด รูปภาพจะถูกตัดให้พอดี:
ตัวอย่าง
img {
width: 200px;
height:
300px;
object-fit: cover;
}
ใช้วัตถุพอดี: มี;
หากเราใช้object-fit: contain;รูปภาพคงอัตราส่วนไว้ แต่ปรับขนาดให้พอดีกับขนาดที่กำหนด:
ตัวอย่าง
img {
width: 200px;
height:
300px;
object-fit: contain;
}
ใช้วัตถุพอดี: เติม;
หากเราใช้object-fit: fill;รูปภาพจะถูกปรับขนาดเพื่อเติมเต็มมิติที่กำหนด หากจำเป็น ภาพจะถูกขยายหรือบีบให้พอดี:
ตัวอย่าง
img {
width: 200px;
height:
300px;
object-fit: fill;
}
ใช้วัตถุพอดี: ไม่มี;
หากเราใช้object-fit: none;รูปภาพจะไม่ถูกปรับขนาด:
ตัวอย่าง
img {
width: 200px;
height:
300px;
object-fit: none;
}
ใช้ object-fit: ลดขนาด;
หากเราใช้object-fit: scale-down;รูปภาพจะถูกลดขนาดเป็นเวอร์ชันที่เล็กที่สุดของnoneor
contain:
ตัวอย่าง
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
ตัวอย่างอื่น
เรามีภาพสองภาพและเราต้องการให้ภาพดังกล่าวเติมความกว้าง 50% ของหน้าต่างเบราว์เซอร์และ 100% ของความสูง
ในตัวอย่างต่อไปนี้ เราไม่ได้ใช้object-fitดังนั้นเมื่อเราปรับขนาดหน้าต่างเบราว์เซอร์ อัตราส่วนกว้างยาวของรูปภาพจะถูกทำลาย:
ตัวอย่าง
ในตัวอย่างถัดไป เราใช้object-fit: cover;ดังนั้นเมื่อเราปรับขนาดหน้าต่างเบราว์เซอร์ อัตราส่วนกว้างยาวของรูปภาพจะยังคงอยู่:
ตัวอย่าง
CSS object-fit ตัวอย่างเพิ่มเติม
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงค่าที่เป็นไปได้ทั้งหมดของobject-fitคุณสมบัติในตัวอย่างเดียว:
ตัวอย่าง
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS Object-* Properties
ตารางต่อไปนี้แสดงรายการคุณสมบัติ CSS object-*:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |