คุณสมบัติ object-position ใช้กำหนดตำแหน่งของเนื้อหาที่แทรกเข้ามา (<img>, <video>, <iframe>) ภายในกล่องของมัน (content box) ใช้ร่วมกับ object-fit
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
width: 200px;
height: 200px;
object-fit: none; /* ไม่บีบอัดรูป ใช้ขนาดจริง */
object-position: 10px 20%; /* เลื่อน 10px จากซ้าย, 20% จากบน */
border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<img class="demo" src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="400" height="250">
<h2>Memcached Tutorial</h2>
<img src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="300" height="250">
</body>
</html>
คำอธิบาย: รูปภาพต้นฉบับ 400x250 ถูกบังคับให้กล่อง 200x200 ด้วย object-fit: none (crop) แล้ว object-position: 10px 20% เลื่อนตำแหน่งมุมมองไปทางขวา 10px และลง 20% (50px) รูปที่สองไม่มี object-fit จึงบีบอัดเต็มกล่อง 300x250
ค่าของ object-position
<position>:left top,center,right bottom,10px 20%,50% 50%(default)- ค่าลบได้:
-10px -20%(เลื่อนออกนอกกล่อง)
object-fit values
fill(default): บีบอัดเต็มกล่อง (อาจบิดเบี้ยว)contain: ขยาย/ย่อจนพอดีกล่อง รักษาอัตราส่วน (อาจมีพื้นที่ว่าง)cover: ครอบคลุมกล่องทั้งหมด รักษาอัตราส่วน (อาจถูก crop)none: ใช้ขนาดจริง ไม่บีบอัด (crop ตามกล่อง)scale-down: เลือกระหว่าง none หรือ contain icheverเล็กกว่า
การประยุกต์: Image thumbnails, profile pictures, hero images, video posters
