สไตล์วัตถุคุณสมบัติ พอดี
ตัวอย่าง
ตัดด้านข้างของรูปภาพ รักษาอัตราส่วนภาพ และเติมช่องว่าง:
document.getElementById("myImg").style.objectFit = "cover";
ความหมายและการใช้งาน
คุณสมบัติ objectFit ใช้เพื่อระบุว่าควรปรับขนาด <img> หรือ <video> อย่างไรให้พอดีกับคอนเทนเนอร์
คุณสมบัตินี้บอกให้เนื้อหาเติมคอนเทนเนอร์ได้หลายวิธี เช่น "รักษาอัตราส่วนภาพนั้นไว้" หรือ "ยืดและใช้พื้นที่ให้มากที่สุด"
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| objectFit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
ไวยากรณ์
ส่งคืนคุณสมบัติ objectFit:
object.style.objectFit
ตั้งค่าคุณสมบัติ objectFit:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit |
| contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box |
| cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit |
| none | The replaced content is not resized |
| scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
| ค่าเริ่มต้น: | เติม |
|---|---|
| คืนมูลค่า: | สตริงที่แสดงถึงความพอดีขององค์ประกอบ |
| เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS วัตถุพอดี
การอ้างอิง CSS: คุณสมบัติวัตถุพอดี
❮ สไตล์วัตถุ