वस्तु-स्थिति - सीएसएस-ट्रिक्स

object-positionसंपत्ति के साथ संयोजन के रूप में प्रयोग किया जाता है object-fitसंपत्ति और परिभाषित करता है कि कैसे इस तरह के एक वीडियो या छवि के रूप में एक तत्व अपनी सामग्री-बॉक्स के अंदर एक्स / Y निर्देशांक के साथ स्थिति में है। यह गुण दो संख्यात्मक मान लेता है, जैसे 0 10%या 0 10px। उन उदाहरणों में, पहली संख्या इंगित करती है कि छवि को सामग्री बॉक्स (0) के बाईं ओर रखा जाना चाहिए, दूसरा यह कि इसे ऊपर से 10% या 10px पर तैनात किया जाना चाहिए। नकारात्मक मूल्यों का उपयोग करना भी संभव है।

किसी छवि पर गुण का उपयोग करते समय डिफ़ॉल्ट मान object-positionहोता है , ताकि डिफ़ॉल्ट रूप से सभी चित्र उनके सामग्री बॉक्स के केंद्र में स्थित हों, जैसे:50% 50%object-fit

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

डेमो

नीचे कुछ उदाहरण दिए गए हैं कि हम किस तरह सेट object-positionकी गई object-fitसंपत्ति के साथ एक छवि में हेरफेर कर सकते हैं none। यदि छवि की सामग्री जो भी कारण से सामग्री बॉक्स को नहीं भरती है, तो अपूर्ण स्थान तत्व की पृष्ठभूमि को दिखाएगा, जो background-imageकि पिछले उदाहरण के अनुसार एक रंग या एक भी हो सकता है :

कोडपैन पर रॉबिन रेंडल (@robinrendle) द्वारा पेन ऑब्जेक्ट स्थिति देखें।