CSS गुण ऑब्जेक्ट-फिट एक तत्व को उस कंटेनर की चौड़ाई और ऊंचाई के भीतर मापता है जिसमें वह है। पृष्ठभूमि चित्र सबसे आम तत्व हैं जो आपको एक डेवलपर के रूप में दिखाई देंगे जो इस संपत्ति का उपयोग करता है।
ऑब्जेक्ट-फिट प्रॉपर्टी के लिए पांच संभावित मान हैं। हम विभिन्न मूल्यों को दर्शाने के लिए उदाहरण के रूप में एक छवि का उपयोग करेंगे:
- ऑब्जेक्ट-फिट:शामिल - युक्त के साथ, कंटेनर में जाने वाले तत्व का पहलू अनुपात (इस उदाहरण में छवि) बनाए रखा जाता है। यदि अनुपात मेल नहीं खाता है, तो आप बार देखेंगे (यह सोचें कि वाइडस्क्रीन वीडियो कब जारी किए गए थे और पुराने टीवी पर आपको स्क्रीन के ऊपर और नीचे बार दिखाई देंगे) जिस भी तरफ अनुपात मेल नहीं खाता है।
- ऑब्जेक्ट-फिट:कवर - सामग्री बॉक्स भरते समय कवर पक्षानुपात बनाए रखता है। यदि पक्षानुपात मेल नहीं खाता है, तो चित्र को फिट करने के लिए क्लिप किया जाएगा।
- ऑब्जेक्ट-फिट:भरें - इस उदाहरण में छवि का आकार तत्व के सामग्री बॉक्स को भरने के लिए किया जाएगा, भले ही मूल पहलू अनुपात मेल खाता हो या नहीं। यह संभवतः छवि को फिट करने के लिए फैलाएगा।
- ऑब्जेक्ट-फिट:कोई नहीं - छवि अपने मूल आकार को बनाए रखेगी।
- ऑब्जेक्ट-फिट:स्केल-डाउन - स्केल-डाउन प्रॉपर्टी स्वचालित रूप से कोई नहीं चुनती है या शामिल हैं , जो भी परिणाम छोटे समग्र छवि आकार में होता है। इस उदाहरण में, स्केल-डाउन शामिल . चुनेंगे :
इस संपत्ति के लिए ब्राउज़र समर्थन काफी व्यापक है। यदि आप पुराने इंटरनेट एक्सप्लोरर, माइक्रोसॉफ्ट एज या ओपेरा ब्राउज़र के लिए विकसित कर रहे हैं तो समर्थन की दोबारा जांच करें।
निष्कर्ष
इस लेख में, हमने ऑब्जेक्ट-फिट प्रॉपर्टी पर एक नज़र डाली। इसका उपयोग उन तत्वों पर किया जाता है जिन्हें डाला जा सकता है और एक कंटेनर भर सकता है। संपत्ति का उपयोग सीधे या अन्य प्रतिस्थापित तत्वों पर किया जाता है ताकि यह नियंत्रित किया जा सके कि
कंटेनर को कैसे भरता है। अपने कंटेनर में तत्व कैसे प्रदर्शित होता है, इसे नियंत्रित करने के लिए ऑब्जेक्ट-पोजिशन प्रॉपर्टी के संयोजन के साथ ऑब्जेक्ट-फिट प्रॉपर्टी का उपयोग करें।