CSS ความเรียงลำดับ object-fit
- ย้อนกลับหน้า @namespace
- ต่อหน้า object-position
คำอธิบายและวิธีใช้
คุณสมบัติ objectFit ใช้กำหนดว่าจะปรับขนาด <img> หรือ <video> ขององค์ประกอบแบบใดเพื่อที่จะเข้ากับองค์ประกอบที่มีขนาด
คุณสมบัตินี้เป็นที่มีข้อมูลว่าเนื้อหาควรกระจายเข้าช่องที่มีขนาด
ดูเพิ่มเติมที่:
ตัวเรียน CSSCSS object-fit
คู่มือ CSSCSS object-position
คู่มือ HTML DOMคุณสมบัติ objectFit
ตัวอย่าง
ตัดส่วนของภาพด้านข้าง รักษาความสัมพันธ์ระหว่างกว้างและสูง และประกอบโซนที่ว่าง
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
การเขียนภาษา CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
ค่าของคุณสมบัติ
| ค่า | รายละเอียด |
|---|---|
| ปรับขนาดเนื้อหาที่ทดแทนเพื่อที่จะประกอบให้เป็นโซนเนื้อหาทั้งหมดขององค์ประกอบ และถ้าจำเป็น อนุธรรมชาติจะถูกขยายหรือหนวด | ค่าเริ่มต้น |
| contain | ยังเพิ่มขนาดเนื้อหาที่ทดแทนเพื่อที่จะเก็บความสัมพันธ์ระหว่างกว้างและสูง และให้เข้ากับโซนเนื้อหาขององค์ประกอบ |
| cover | ปรับขนาดเนื้อหาที่ทดแทนเพื่อที่จะประกอบให้เป็นโซนเนื้อหาทั้งหมดขององค์ประกอบที่ทดแทน และทรัพยากรจะถูกตัดทอด |
| none | เนื้อหาที่ทดแทนจะไม่ปรับขนาด |
| scale-down | ขนาดของเนื้อหาเท่ากับ none หรือ contain ในบางส่วน ขึ้นอยู่กับใครที่ได้ขนาดส่วนตัวของอนุธรรมชาติเล็กกว่า |
| initial | ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น initial. |
| inherit | ขอบคุณสมบัตินี้จากอนุภาคพ่อของเรา inherit. |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | ดูคุณสมบัติแยกต่อไป |
|---|---|
| ทราบรับทิ้ง: | ไม่ |
| การสร้างอนุทาน: | ไม่สนับสนุน。ดูถึง:คุณสมบัติที่เกี่ยวกับอนุทาน. |
| เวอร์ชั่น: | CSS3 |
| การเขียนภาษา JavaScript: | object.style.objectFit="cover" |
การสนับสนุนโปรแกรมน่าที่ใช้
ตัวเลขในตารางชี้ถึงเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- ย้อนกลับหน้า @namespace
- ต่อหน้า object-position
