คุณสมบัติตำแหน่งวัตถุ CSS

สารบัญ

คุณสมบัติ CSS object-position ใช้เพื่อระบุตำแหน่ง <img> หรือ <video> ภายในภาชนะของมัน

รูปภาพ

ดูภาพต่อไปนี้จากปารีสซึ่งมีขนาด 400x300 พิกเซล:

ต่อไปเราใช้คุณสมบัติ CSS

object-fit: cover;

เพื่อรักษาอัตราส่วนภาพและเติมเต็มมิติที่กำหนด อย่างไรก็ตาม รูปภาพจะถูกตัดให้พอดี เช่นนี้

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

การใช้คุณสมบัติตำแหน่งของวัตถุ

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

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

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 80% 100%;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

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

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 15% 100%;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

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

ตารางต่อไปนี้แสดงรายการคุณสมบัติ CSS object-*:

object-fit: ระบุวิธีปรับขนาด <img> หรือ <video> ให้พอดีกับคอนเทนเนอร์
object-position: ระบุว่า <img> หรือ <video> ควรอยู่ในตำแหน่งใดด้วย x/y พิกัดภายใน "กล่องเนื้อหาของตัวเอง"