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-down
none
- รูปภาพถูกย่อขนาดเป็น 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;
รูปภาพจะถูกลดขนาดเป็นเวอร์ชันที่เล็กที่สุดของnone
or
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" |