CSS object-position

object-position क्या Control करता है

object-position किसी replaced element के content (एक img या video) का alignment उसके box के अंदर set करता है जब object-fit ने scaling behavior तय कर दिया हो -- यह जवाब देता है कि cropping या letterboxing होने पर 'media का कौन-सा हिस्सा visible रहता है', background-position जैसा ही two-value syntax इस्तेमाल करते हुए।

उदाहरण: What object-position Controls

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}
</style>
<img src="https://placehold.co/400x400" alt="Which part of the media stays visible">

Percentage और Keyword Values इस्तेमाल करना

object-position keywords (top, bottom, left, right, center) और percentage या length values दोनों accept करता है, जहाँ percentages describe करते हैं कि image का corresponding point box के edge से कितना offset है -- 0% 0% top-left है, 100% 100% bottom-right है।

उदाहरण: Using Percentage and Keyword Values

<style>
.tl {
  width: 150px;
  height: 100px;
  object-fit: cover;
  object-position: 0% 0%;
}
.br {
  width: 150px;
  height: 100px;
  object-fit: cover;
  object-position: 100% 100%;
}
</style>
<img class="tl" src="https://placehold.co/400x400" alt="Top-left">
<img class="br" src="https://placehold.co/400x400" alt="Bottom-right">

यह सिर्फ Certain object-fit Values के साथ ही क्यों मायने रखता है

object-position का कोई visible effect नहीं होता जब object-fit fill हो (image को box से exactly match करने के लिए stretch किया जाता है, reposition करने के लिए कोई extra space नहीं छोड़ता) या जब image का natural size पहले से box से exactly match करता हो।

यह cover और contain के साथ सबसे उपयोगी है, जहाँ cropping या letterboxing असल में चुनने के लिए जगह छोड़ती है।

उदाहरण: Why It Only Matters With Certain object-fit Values

<style>
.fill {
  width: 150px;
  height: 100px;
  object-fit: fill;
  object-position: top;
}
</style>
<img class="fill" src="https://placehold.co/400x400" alt="object-position has no visible effect with fill">

किसी Landscape Box में एक Portrait को Reposition करना

एक common real use case एक wide landscape-shaped card में रखी गई एक tall portrait photo है: object-fit: cover photo को box भरने के लिए crop करता है, और object-position: top सुनिश्चित करता है कि किसी व्यक्ति का face (आमतौर पर portrait के top के पास) center पर crop होकर गायब होने के बजाय visible रहे।

उदाहरण: Repositioning a Portrait in a Landscape Box

<style>
.portrait {
  width: 300px;
  height: 120px;
  object-fit: cover;
  object-position: top;
}
</style>
<img class="portrait" src="https://placehold.co/300x500" alt="Face stays visible near the top">

Video Elements के साथ Combine करना

object-position video elements पर images जैसा ही identically काम करता है, किसी cropped background video को player का aspect ratio चाहे जो भी हो अपने important visual content (जैसे किसी webcam recording में speaker का face) को सही तरीके से framed रखने देते हुए।

उदाहरण: Combining With Video Elements

<style>
video {
  width: 300px;
  height: 120px;
  object-fit: cover;
  object-position: top;
}
</style>
<video controls></video>