CSS Object Fit

fill Value

fill बिना object-fit वाले replaced elements के लिए default behavior है, यह media को original aspect ratio नज़रअंदाज़ करते हुए box को पूरी तरह भरने के लिए stretch करता है। यह default behavior शायद ही कभी photos के लिए वह होता है जो आप चाहते हैं, क्योंकि distortion आमतौर पर visually jarring होता है।

उदाहरण: The fill Value

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: fill;
}
</style>
<img src="https://placehold.co/400x400" alt="Stretched, ignoring the original aspect ratio">

contain Value

contain media को shrink या grow करता है ताकि पूरी चीज़ अपने aspect ratio को रखते हुए box के अंदर fit हो जाए, छोटे axis पर खाली जगह छोड़ते हुए। यह value तब ideal है जब आपको guarantee करना है कि पूरी image visible है, भले ही इसका मतलब उसके आस-पास visible खाली space हो।

उदाहरण: The contain Value

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: contain;
  background: #eee;
}
</style>
<img src="https://placehold.co/400x400" alt="Entire image visible, empty space on the shorter axis">

cover Value

cover media को तब तक scale up करता है जब तक यह पूरी तरह box भर न दे, किसी भी overflow को crop करते हुए, यह hero images और avatars के लिए सबसे common choice है। क्योंकि image का कुछ हिस्सा crop हो जाता है, cover तब सबसे अच्छा काम करता है जब subject centered हो या object-position को इसके लिए compensate करने के लिए adjust किया गया हो।

उदाहरण: The cover Value

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: cover;
}
</style>
<img src="https://placehold.co/400x400" alt="Fills the box, cropping any overflow">

none और scale-down Values

none box को पूरी तरह नज़रअंदाज़ करता है और media को उसके natural size पर दिखाता है, संभावित रूप से overflow या gaps छोड़ते हुए, जबकि scale-down none या contain में से जो भी छोटा result दे उसे चुनता है।

उदाहरण: The none and scale-down Values

<style>
.none {
  width: 100px;
  height: 100px;
  object-fit: none;
}
.scale-down {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
}
</style>
<img class="none" src="https://placehold.co/300x300" alt="Natural size, may overflow">
<img class="scale-down" src="https://placehold.co/300x300" alt="Shrunk to fit like contain">

object-position से Focal Point Control करना

object-position तय करता है कि जब object-fit crop करे या खाली जगह छोड़े तो media का कौन-सा हिस्सा anchored और visible रहे, keywords या precise percentage और length values accept करते हुए।

इसे adjust किए बिना, original photo में off-center positioned subject को object-fit: cover पूरी तरह crop कर सकता है।

उदाहरण: Controlling the Focal Point With object-position

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  object-position: top;
}
</style>
<img src="https://placehold.co/400x400" alt="Keeps the top of the photo visible when cropped">