CSS รายละเอียด object-position
- หน้าก่อน object-fit
- หน้าต่อไป offset
การระบุและการใช้งาน
การใช้คุณสมบัติ object-position พร้อมกับ object-fit สามารถกำหนดวิธีที่จะใช้ตำแหน่งตัวแบบ x/y ใน "กล่องเนื้อหาของตัวเอง" สำหรับ <img> หรือ <video>。
ดูเพิ่มเติมที่:
ตัวอย่าง CSS:CSS object-fit
คู่มืออ้างอิง CSS:CSS object-position
คู่มืออ้างอิง HTML DOM:คุณสมบัติ objectPosition
ตัวอย่าง
ปรับขนาดรูปภาพเพื่อให้เข้ากับกล่องเนื้อหาของมัน และย้ายรูปภาพในกล่องเนื้อหาเหนือซ้าย 5px และด้านบน 10%：
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
การเขียน CSS
object-position: position|initial|inherit;
ค่าของคุณสมบัติ
| ค่า | การอธิบาย |
|---|---|
| position |
กำหนดตำแหน่งรูปภาพหรือวิดีโอในกล่องเนื้อหาของมัน。 ค่าแรกควบคุมตัวแบบทาง X และค่าที่สองควบคุมตัวแบบทาง Y。 สามารถเป็นตัวอักษร (left, center หรือ right) หรือตัวเลข (ด้วย px หรือ %) สามารถใช้ค่าลบได้。 |
| initial | ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดูเพิ่มเติมที่: initial. |
| inherit | สืบทอดคุณสมบัตินี้จากตัวปลูกข่ายของมัน。ดูเพิ่มเติมที่: inherit. |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | 50% 50% |
|---|---|
| การสืบทอด: | ใช่ |
| การสร้างอนุรักษ์: | สนับสนุน。ดูเพิ่มเติมที่:คุณสมบัติที่เกี่ยวกับอนุรักษ์. |
| เวอร์ชั่น: | CSS3 |
| JavaScript ภาษาเขียน: | object.style.objectPosition="0 10%" |
การสนับสนุนบราวเซอร์
ตัวเลขในตารางหมายถึงเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- หน้าก่อน object-fit
- หน้าต่อไป offset
