คุณสมบัติ object-fit

คุณสมบัติ object-fit กำหนด สัดส่วนภาพหรือการปรับขนาด ขององค์ประกอบเช่นรูปภาพ หรือวิดีโอ

ไวยากรณ์

cssตัวเลือก {
  object-fit: fill หรือ contain หรือ cover หรือ none;
}

ตารางด้านล่างแสดงค่าหลักสำหรับ คุณสมบัติ object-fit:

ค่า

ตัวอย่าง

มาทำให้รูปภาพของเราเติมเต็ม พื้นที่ขนาดที่กำหนดโดยไม่รักษา สัดส่วนกัน:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

คราวนี้มาทำให้รูปภาพเติมเต็ม คอนเทนเนอร์ที่กำหนดโดยรักษา สัดส่วน:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาทำให้รูปภาพของเราเติมเต็ม คอนเทนเนอร์ที่กำหนด โดยปรับขนาดของรูปภาพเอง แต่ยังรักษาสัดส่วนของมัน ไว้:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพของเรา ในคอนเทนเนอร์ที่กำหนดโดยรักษา ขนาดเดิมของมัน:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ดูเพิ่มเติม