object fit property in hindi-ऑब्जेक्ट फिट प्रॉपर्टी हिंदी में

by

हेल्लो दोस्तों आज के इस पोस्ट में आपको object fit property in hindi के बारे में बताया गया है की इसे कैसे प्रयोग करते है तो चलिए शुरू करते है

Object fit property का परिचय

css में ऑब्जेक्ट fit की property यह बताती है की किसी भी image या video को उसके container में ही fit करने के लिए किस प्रकार से resize किया जाना चाहिए यह property बताती है

कई बार ऐया हो जाता है की आपके webpage में बहुत ही कम space available आपका होता है और आप किसी भी image को शो करना चाहते है तो जब आप space में image को शो करते है तो कम space होने की वजह से image सिकुड़ जाती है और image webpage पर अच्छे से display नहीं हो पाता है

इसे भी पढ़े –

या फिर आप कई बार ऐसा भी हो सकता है की आपके पास बहुत से space available होता है लेकिन आपकी image की साइज़ बहुत ही कम होता है की image पुरे space को cover करे लेकिन आप जब भी ऐसा करते है तो image की बहुत अधिक stretch हो जाती है और अच्छे तरह से display नहीं हो पाती है

इस सिचुएशन में कोई भी object-fit-property के द्वारा ही आप image या video को इस प्रकार से resize कर सकते है की वह available space में आपकी आवश्कता के अनुसार ही ठीक से display हो सकती है इसके लिए इस property की वैल्यूज को के रूप में आपके pass बहुत से आप्शन available होते है

syntax of css object-fit-property

इस property के syntax के बारे में आपको निचे बताया जा रहा है

object-fit:none | fill | contain | cover | scale-down;

जैसा की आप उपर दिए गए syntax को देख सकते है की object-fit-property की 5 possible वैल्यूज हो सकती है जिनके बारे में आपको निचे दिया जा रहा है

  • none– इस value को डिफाइन करने से object के (image or video) को किसी भी प्रकार से resize नहीं किया जा सकता है
  • fill– इस वैल्यूज को डिफाइन करने के लिए object के द्वारा container पूरी तरह से fill कर दिया जाता है फिर चाहे इसके लिए image को stretch करना पड़े या फिर सिकुड़ना पड़े इस value के द्वारा object का aspect ratio (real object clarity) नहीं preserve किया जाता है यानी की image पर यदि stretch और shrink करते समय image की quality को ध्यान में अनहि रखा जाता है
  • contain– इस value को डिफाइन करने से container में fit होने के लिए आप object की साइज़ को increase या decrease किया जा सकता है लेकिन आप object के aspect ratio को preserve किया जाता है
  • cover– इस value को डिफाइन करने से object के द्वारा container को पूरी तरह से fill कर दिया जाता है तथा साथ ही object का aspect ratio भी preserve कर दिया जाता है परतु container को fill करने के लिए object को sides में से clip किया जाता है
  • scale-down – इस value का प्रयोग करने से object के aspect ratio को preserve करने हुए भी object को shrink किया जाता है ताकि वह container में आसानी से fit हो जा सके

css object-fit property का example

इस property का आपको example निचे दिया जा रहा है जिसे आप आसानी से समझ सकते है

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		#image
		{
			width: 300px;
			height: 100px;
			object-fit: scale-down;
		}
	</style>
</head>
<body>
	<div id="image">
<img src="F:\website content/4.png">
</body>
</html>
object fit property in hindi

reference-https://www.w3schools.com/css/css3_object-fit.asp

निवेदन:-अगर आपके लिए यह पोस्ट(object fit property in hindi ) उपयोगी लगा हो तो आप अपने दोस्तों के साथ शेयर करना न भूले और किसी भी सब्जेक्ट( object fit property in hindi) को पढने के लिए आप कमेंट्स के द्वारा अथवा ग्रुप( object fit property in hindi ) के द्वारा हमें बता सकते है उस सब्जेक्ट को जल्द ही अपलोड() कर दिया जायेगा

Leave a Comment