CSS คุณสมบัติ object-position

CSS object-position ตัวแปรที่ใช้เพื่อกำหนดตำแหน่งของ <img> หรือ <video> ในตัวแก้วของมัน:

ภาพ

ดูภาพด้านล่างนี้จากหมินหลิน ขนาด 600x400 พิกเซล:

ต่อจากนั้น เราใช้ object-fit: cover; เพื่อรักษาอัตราส่วนของภาพและทำให้เต็มขอบของขนาดที่กำหนด แต่ภาพจะถูกตัดเอาไปเพื่อที่จะติดตั้งดังนี้:

ตัวอย่าง

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

ลองทดลองเอง

ใช้ตัวแปร object-position

ตองแน่ใจว่าส่วนที่แสดงภาพของเราไม่ใช่ที่ที่เราต้องการ สำหรับจัดตัวภาพ เราจะใช้ object-position ตัวแปร。

ที่นี่ เราจะใช้ object-position ตัวแปรเพื่อจัดตัวภาพ ที่อาคารโบราณตั้งอยู่ที่กลาง:

ตัวอย่าง

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

ลองทดลองเอง

ที่นี่ เราจะใช้ object-position คุณสมบัติเพื่อจัดตั้งตำแหน่งรูปภาพ ทำให้บางทับทางด้านขวาของทางเข้าของพระราชวังหลวงนี้มีชื่อเสียง

ตัวอย่าง

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

ลองทดลองเอง

CSS object-* คุณสมบัติ

ตารางต่อไปนี้ระบุคุณสมบัติ CSS object-*