object-fit गुण

object-fit गुण छवि या वीडियो जैसे तत्वों के पहलू अनुपात या स्केलिंग को निर्दिष्ट करता है।

सिंटैक्स

cssसेलेक्टर {
  object-fit: fill या contain या cover या none;
}

object-fit गुण के लिए मुख्य मान तालिका में प्रस्तुत किए गए हैं:

मान	विवरण
`fill`	तत्व को दिए गए आकार के अनुरूप स्केल किया जाता है, जबकि तत्व के अनुपातों को नजरअंदाज कर दिया जाता है।
`contain`	तत्व को दिए गए आकार के अनुरूप स्केल किया जाता है, जबकि तत्व के अनुपात संरक्षित रहते हैं।
`cover`	तत्व का आकार बदल दिया जाता है ताकि निर्दिष्ट क्षेत्र पूरी तरह भर जाए, जबकि तत्व के अपने अनुपात संरक्षित रहते हैं।
`none`	तत्व का मूल आकार संरक्षित रहता है।

आइए हम अपनी छवि को निर्दिष्ट आकार भरने के लिए सेट करें लेकिन अनुपातों को संरक्षित किए बिना:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

और अब आइए छवि को निर्दिष्ट कंटेनर को इस तरह भरने दें कि अनुपात संरक्षित रहें:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

आइए हमारी छवि को निर्दिष्ट कंटेनर को इस तरह भरने दें कि छवि का आकार बदल जाए, लेकिन इसके अनुपात संरक्षित रहें:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

आइए बस अपनी छवि को निर्दिष्ट कंटेनर में उसके मूल आकार को संरक्षित करते हुए रखें:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат: