वस्तु-योग्य - सीएसएस-ट्रिक्स

object-fitसंपत्ति परिभाषित करता है ऊंचाई और उसकी सामग्री बॉक्स की चौड़ाई के लिए कैसे एक तत्व प्रतिक्रिया। यह छवियों, वीडियो और object-positionसंपत्ति के साथ संयोजन के रूप में अन्य एम्बेड करने योग्य मीडिया प्रारूपों के लिए अभिप्रेत है । स्वयं द्वारा उपयोग किया जाता है, object-fitहमें अपने बॉक्स के अंदर कैसे स्क्वैश और स्ट्रेच करता है, इस पर हमें ठीक-ठीक नियंत्रण देकर इनलाइन छवि तैयार करने देता है।

object-fit इन पांच मूल्यों में से एक के साथ सेट किया जा सकता है:

fill: यह डिफ़ॉल्ट मान है जो सामग्री बॉक्स को फिट करने के लिए छवि को फैलाता है, इसके पहलू-अनुपात की परवाह किए बिना।
contain: अपने पहलू-अनुपात को संरक्षित करते हुए बॉक्स को भरने के लिए छवि के आकार को बढ़ाता या घटाता है।
cover: छवि अपने बॉक्स की ऊंचाई और चौड़ाई को भर देगी, एक बार फिर से इसके पहलू अनुपात को बनाए रखेगा लेकिन अक्सर प्रक्रिया में छवि को क्रॉप कर देगी।
none: छवि माता-पिता की ऊंचाई और चौड़ाई को नजरअंदाज करेगी और अपने मूल आकार को बनाए रखेगी।
scale-down: छवि सबसे छोटे कंक्रीट ऑब्जेक्ट आकार को खोजने के लिए noneऔर बीच के अंतर की तुलना करेगी contain।

इस प्रकार हम उस संपत्ति को निर्धारित कर सकते हैं:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

क्योंकि दूसरी छवि में एक पहलू अनुपात होता है, जो बाईं ओर की मूल छवि से भिन्न होता है, यह इसके सामग्री बॉक्स के दायरे से बाहर खिंच जाएगा, छवि के ऊपरी और निचले हिस्सों को काट देगा।

यह ध्यान देने योग्य है कि डिफ़ॉल्ट रूप से छवि इसके सामग्री बॉक्स के भीतर केंद्रित है लेकिन यह object-positionसंपत्ति के साथ बदल सकती है ।

डेमो

नीचे दिया गया डेमो पांच उदाहरण दिखाता है कि कैसे हम एक छवि को एक सामग्री बॉक्स में स्क्विश करना चाहते हैं जो कभी-कभी अपनी मूल चौड़ाई से छोटा या बड़ा होता है (यह कैसे काम कर सकता है, इसके बारे में बेहतर विचार के लिए ब्राउज़र का आकार बदलें):

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

यदि छवि की सामग्री जो भी कारण से सामग्री बॉक्स को नहीं भरती है, तो अपूर्ण स्थान तत्व की पृष्ठभूमि दिखाएगा, इस उदाहरण में एक हल्के भूरे रंग की पृष्ठभूमि।