คุณสมบัติตำแหน่งวัตถุ CSS
ตัวอย่าง
ปรับขนาดรูปภาพให้พอดีกับกล่องเนื้อหา และวางตำแหน่งรูปภาพ 5px จากด้านซ้ายและ 10% จากด้านบนในกล่องเนื้อหา:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
ความหมายและการใช้งาน
คุณสมบัติobject-positionนี้ใช้ร่วมกับ object-fit เพื่อระบุว่าควรวางตำแหน่ง <img> หรือ <video> ด้วยพิกัด x/y ภายใน "กล่องเนื้อหาของตัวเอง" อย่างไร
| ค่าเริ่มต้น: | 50% 50% |
|---|---|
| รับการถ่ายทอด: | ใช่ |
| เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS3 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.objectPosition="0 10%" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
ไวยากรณ์ CSS
object-position: position|initial|inherit;
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS วัตถุพอดี
การอ้างอิง CSS: CSS object-fit
การอ้างอิง HTML DOM: คุณสมบัติ objectPosition