CSS object-fit Property
ตัวอย่าง
ตัดด้านข้างของรูปภาพ รักษาอัตราส่วนภาพ และเติมช่องว่าง:
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
ความหมายและการใช้งาน
คุณสมบัติobject-fit
นี้ใช้เพื่อระบุว่าควรปรับขนาด <img> หรือ <video> อย่างไรให้พอดีกับคอนเทนเนอร์
คุณสมบัตินี้บอกให้เนื้อหาเติมคอนเทนเนอร์ได้หลายวิธี เช่น "รักษาอัตราส่วนภาพนั้นไว้" หรือ "ยืดและใช้พื้นที่ให้มากที่สุด"
ค่าเริ่มต้น: | ดูคุณสมบัติส่วนบุคคล |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.objectFit="ปก" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
ไวยากรณ์ CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Try it |
---|---|---|
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: CSS วัตถุพอดี
การอ้างอิง CSS: CSS object-position
การอ้างอิง HTML DOM: คุณสมบัติ objectFit