CSS प्रॉपर्टी object-fit किसी एलिमेंट को उसके कंटेनर की चौड़ाई और ऊंचाई के भीतर स्केल करती है। बैकग्राउंड इमेजेज सबसे आम एलिमेंट हैं जिनका आप एक डेवलपर के रूप में सामना करेंगे जो इस प्रॉपर्टी का उपयोग करता है।
object-fit के पांच संभावित मान
हम विभिन्न मानों को चित्रित करने के लिए एक इमेज का उदाहरण लेंगे:
object-fit: contain- एलिमेंट का आस्पेक्ट रेशियो (इस उदाहरण में इमेज) बनाए रखा जाता है। यदि अनुपात मेल नहीं खाता है, तो आप उन किनारों पर बार देखेंगे जहां अनुपात मेल नहीं खाता (पुराने टेलीविजन पर वाइडस्क्रीन वीडियो जारी होने पर स्क्रीन के ऊपर और नीचे बार दिखाई देने के बारे में सोचें)।object-fit: cover- कंटेंट बॉक्स को भरते समय आस्पेक्ट रेशियो को बनाए रखता है। यदि आस्पेक्ट रेशियो मेल नहीं खाता है, तो इमेज को फिट करने के लिए क्लिप किया जाएगा।object-fit: fill- इमेज को एलिमेंट के कंटेंट बॉक्स को भरने के लिए आकार दिया जाएगा, चाहे मूल आस्पेक्ट रेशियो मेल खाता हो या नहीं। यह शायद इमेज को फिट करने के लिए खींच देगा।object-fit: none- इमेज अपने मूल आकार को बनाए रखेगी।object-fit: scale-down- स्केल-डाउन प्रॉपर्टी स्वचालित रूप से none या contain में से किसी एक को चुनती है, जो भी समग्र छोटे इमेज आकार का परिणाम देता है।
object-position के साथ संयोजन
object-fit प्रॉपर्टी का उपयोग object-position प्रॉपर्टी के साथ संयोजन में करें ताकि यह नियंत्रित किया जा सके कि एलिमेंट अपने कंटेनर में कैसे प्रदर्शित होता है।
ब्राउज़र सपोर्ट
इस प्रॉपर्टी के लिए ब्राउज़र सपोर्ट काफी व्यापक है। यदि आप पुराने इंटरनेट एक्सप्लोरर, माइक्रोसॉफ्ट एज या ओपेरा ब्राउज़र्स के लिए विकसित कर रहे हैं तो सपोर्ट को दोबारा जांचें।
निष्कर्ष
इस लेख में, हमने object-fit प्रॉपर्टी पर एक नज़र डाली। इसका उपयोग उन एलिमेंट्स पर किया जाता है जिन्हें डाला जा सकता है और एक कंटेनर भर सकते हैं। प्रॉपर्टी का उपयोग सीधे <img> या अन्य प्रतिस्थापित एलिमेंट्स पर किया जाता है ताकि यह नियंत्रित किया जा सके कि <img> कंटेनर को कैसे भरता है। एलिमेंट को उसके कंटेनर में कैसे प्रदर्शित किया जाता है, इसे नियंत्रित करने के लिए object-fit प्रॉपर्टी का उपयोग object-position प्रॉपर्टी के साथ संयोजन में करें।
