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