Style คุณสมบัติ objectPosition
- หน้าก่อนหน้า objectFit
- หน้าต่อไป opacity
- กลับไปที่หน้าก่อนหน้า Object HTML DOM Style
การประกาศและการใช้งาน
objectPosition คุณสมบัติใช้เพื่อกำหนด <img> หรือ <video> แนวทางการจัดตำแหน่งในกล่องเนื้อหาของมันเอง
ดูเพิ่มเติม:
เรียน CSS:CSS object-fit
คู่มือ CSS:คุณสมบัติ object-position
ตัวอย่าง
ปรับขนาดรูปภาพเพื่อให้เข้ากับกล่องเนื้อหา และจัดตำแหน่งรูปภาพที่ห่างจากด้านซ้าย 5px และห่างจากด้านบน 10%:
document.getElementById("myImg").style.objectPosition = "0 10%";
รูปแบบ
กลับค่าคุณสมบัติ objectPosition:
object.style.objectPosition
ตั้งค่าคุณสมบัติ objectPosition:
object.style.objectPosition = "position|initial|inherit"
ค่าของคุณสมบัติ
| ค่า | บรรยาย |
|---|---|
| position |
กำหนดตำแหน่งของรูปภาพหรือวิดีโอในกล่องเนื้อหาของมัน ค่าแรกควบคุมแบบภาพทางตั้งแต่แนว X และค่าที่สองควบคุมแบบภาพทางตั้งแต่แนว Y สามารถเป็นข้อความ (left, center หรือ right) หรือตัวเลข (ด้วยหน่วยความยาว px หรือ %) อนุญาตให้มีค่าลบ |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial. |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน โปรดดู inherit. |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | 50% 50% |
|---|---|
| ค่าที่กลับมา: | ข้อความหรือตัวเลขที่แสดงตำแหน่งขององค์ประกอบในกล่องเนื้อหาของมัน |
| เวอร์ชัน CSS: | CSS3 |
การสนับสนุนของเบราเซอร์
ตัวเลขในตารางบอกว่าอุปกรณ์ที่สนับสนุนอย่างเต็มที่ของคุณสมบัตินี้
| เชโรม์ | เอดจ์ | ไฟร็อกซ์ | เซฟารี่ | ออเปร่า |
|---|---|---|---|---|
| เชโรม์ | เอดจ์ | ไฟร็อกซ์ | เซฟารี่ | ออเปร่า |
| 31.0 | 16.0 | 36.0 | 10.1 | 19.0 |
- หน้าก่อนหน้า objectFit
- หน้าต่อไป opacity
- กลับไปที่หน้าก่อนหน้า Object HTML DOM Style
