คุณสมบัติ objectFit สไตล์
- หน้าก่อน minWidth
- หน้าต่อไป objectPosition
- กลับไปยังระดับที่สูงกว่า Object HTML DOM Style
คำอธิบายและวิธีใช้
objectFit คุณสมบัตินี้ใช้เพื่อกำหนดวิธีที่จะปรับขนาดของ <img> หรือ <video> ให้เข้ากับตัวแปล
คุณสมบัตินี้บอกว่าเนื้อหาควรเติมตัวแปลด้วยวิธีหลายรูปแบบ; ตัวอย่างเช่น "รักษาอัตราส่วนขนาด" หรือ "ขยายและใช้พื้นที่ที่เป็นไปได้ที่สุด"
ดูเพิ่มเติม：
การเรียน CSSCSS object-fit
คู่มือ CSSคุณสมบัติ object-fit
ตัวอย่าง
ตัดฝั่งของภาพ รักษาอัตราส่วนขนาด และเติมพื้นที่เพื่อให้เต็ม
document.getElementById("myImg").style.objectFit = "cover";
การใช้งาน
กลับค่า objectFit ออกมา：
object.style.objectFit
ตั้งคุณสมบัติ objectFit：
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
ค่าของคุณสมบัติ
| ค่า | รายละเอียด |
|---|---|
| fill | ค่าเริ่มต้น。ปรับขนาดเนื้อหาที่แทนที่เพื่อที่จะเติมให้เต็มกับกล่องเนื้อหาขององค์ประกอบ หากจำเป็น ตัวแปลจะถูกขยายหรือบีบ |
| contain | ย่อรวมเนื้อหาที่แทนที่เพื่อที่จะรักษาอัตราส่วนของขนาด ในขณะที่ทันทีที่องค์ประกอบ |
| cover | ปรับขนาดเนื้อหาที่แทนที่เพื่อที่จะรักษาอัตราส่วนของขนาด ในขณะที่เติมให้เต็มกับกล่องเนื้อหาขององค์ประกอบ ตัวแปลจะถูกตัดออก |
| none | เนื้อหาที่แทนที่จะไม่มีการปรับขนาด |
| scale-down | ขนาดของเนื้อหาเทียบเท่า none หรือ contain หนึ่งในสองตัว การเลือกขึ้นอยู่กับขนาดของตัวแปลที่เล็กที่สุด |
| initial | ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial。 |
| inherit | มีคุณสมบัตินี้มาจากองค์ประกอบพ่อของเรา โปรดดู inherit。 |
รายละเอียดเทคนิค
| ค่าเริ่มต้น： | fill |
|---|---|
| ค่าที่กลับมา： | ตัวแปลสตริงที่แสดงขององค์ประกอบ คุณสมบัติ object-fit。 |
| เวอร์ชั่น CSS： | CSS3 |
การสนับสนุนเบราเซอร์
ตัวเลขในตารางระบุสูตรรุ่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่สุด。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- หน้าก่อน minWidth
- หน้าต่อไป objectPosition
- กลับไปยังระดับที่สูงกว่า Object HTML DOM Style
