object-fit गुण

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

सिंटैक्स

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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