CSS object-fit अटेब्यूट
- पिछला पृष्ठ CSS इमेज स्टाइल
- अगला पृष्ठ CSS object-position
CSS object-fit अटेब्यूट यह निर्देश देता है कि <img> या <video> का आकार कैसे समायोजित किया जाए ताकि यह अपने कंटेनर के अनुकूल हो।
ब्राउज़र समर्थन
तालिका में दिए गए नंबर इस अटेब्यूट का पूर्ण समर्थन करने वाले पहले ब्राउज़र का संस्करण को सूचित करते हैं।
| अटेब्यूट | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS object-fit अटेब्यूट
CSS object-fit यह अटेब्यूट <img> या <video> के आकार को कैसे समायोजित करने का निर्देश देता है।
यह अटेब्यूट भिन्न तरीके से भरने के लिए इस्तेमाल किया जाता है। जैसे 'अनुपात बनाए रखें' या 'जितना भी संभव हो, जगह भरें'।
यहाँ नीचे दिखाए गए शांघाई फ्लोराइट में काले फूल के चित्र, जो 300x300 पिक्सल है:
लेकिन, अगर हम उपरोक्त चित्र को 200x300 पिक्सल में सेट करते हैं, तो यह इस तरह दिखेगा:
इंस्टेंस
img {
width: 200px;
height: 300px;
}
हम देखते हैं कि चित्र 200x300 पिक्सल के कंटेनर में समायोजित हो जाता है और मूल अनुपात नष्ट हो जाता है।
अगर हम इसे इस्तेमाल करते हैं object-fit: cover;यह चित्र के पार्श्व को काट देगा, अनुपात को बनाए रखेगा, और जगह भरेगा, जैसा कि नीचे दिखाया गया है:
इंस्टेंस
img {
width: 200px;
height: 400px;
object-fit: cover;
}
एक अन्य उदाहरण
यहाँ, हम दो चित्र हैं, जिन्हें हम चाहते हैं कि वे ब्राउज़र विंडो की 50% चौड़ाई और 100% ऊंचाई भरें।
अगले उदाहरण में, हम इसे नहीं इस्तेमाल करते object-fitइसलिए, जब हम ब्राउज़र विंडो के आकार को समायोजित करते हैं, तो चित्र का अनुपात नष्ट हो जाता है:
इंस्टेंस
अगले उदाहरण में, हम इसे इस्तेमाल करते हैं object-fit: cover;इसलिए, जब हम ब्राउज़र विंडो के आकार को समायोजित करते हैं, तो चित्र का अनुपात बना रहे:
इंस्टेंस
CSS object-fit अटेब्यूट के सभी मान
object-fit प्रविधि निम्नलिखित मान ग्रहण कर सकती है:
fill- डिफ़ॉल्ट मान। प्रतिस्थापित सामग्री का आकार समायोजित करें, ताकि इसे तत्व के सामग्री बॉक्स भरा जा सके। आवश्यकता पड़े तो तत्व को फैलाया या संकुचित किया जाए।contain- प्रतिस्थापित सामग्री को फैलाएं, ताकि इसका अनुपात बना रहे और इसे तत्व के सामग्री बॉक्स में डाला जाए।cover- फुलेले तत्व के पूरे सामग्री बॉक्स को भरने के लिए आकार को समायोजित करें, ताकि उसका अनुपात बना रहे। इस ऑब्जेक्ट को कट दिया जाएगा ताकि इसे अनुकूलित किया जा सके।none- प्रतिस्थापित सामग्री के आकार को समायोजित न करें。scale-down- विषय के आकार को समायोजित करें जैसे कि विषय नहीं निर्दिष्ट हो या विषय को शामिल किया गया है (छोटे विशिष्ट आकार का आकार पैदा करेगा)
नीचे दिए गए उदाहरण में दिखाया गया है object-fit सभी संभावित मान
इंस्टेंस
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- पिछला पृष्ठ CSS इमेज स्टाइल
- अगला पृष्ठ CSS object-position
