CSS object-fit प्रतियोगिता

रोष्ट्र और उपयोग

object-fit गुण <img> या <video> के आकार को कैसे समायोजित करने के लिए इस्तेमाल किया जाता है, ताकि इसका आकार उसके भारी बॉक्स के अनुरूप हो।

यह गुण सामग्री को कैसे भरने के तरीके को सूचित करता है। उदाहरण के लिए 'अनुपात बनाए रखें' या 'फैला और जितना अधिक स्थान लें'。

और देखें:

CSS शिक्षा:CSS object-fit

CSS संदर्भ दस्तावेज़:CSS object-position

HTML DOM संदर्भ दस्तावेज़:objectFit गुण

उदाहरण

चित्र के दोनों किनारों को कटूं, अनुपात बनाए रखें और खाली जगह को भरें:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

स्वयं प्रयोग करें

CSS व्याकरण

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

गुण मूल्य

मूल्य वर्णन
fill डिफ़ॉल्ट मूल्य। प्रतिस्थापित सामग्री का आकार समायोजित करें, ताकि इसका आकार एलीमेंट के सामग्री बॉक्स को भरा जा सके। आवश्यकता पड़े तो ऑब्जैक्ट को खींचा या उच्चारित किया जाएगा。
contain प्रतिस्थापित सामग्री को अनुपात बनाए रखते हुए आकार बढ़ाया जाता है, ताकि इसका आकार एलीमेंट के सामग्री बॉक्स में फिट हो।
cover प्रतिस्थापित सामग्री का आकार समायोजित करें, ताकि फुलाने वाले एलीमेंट के पूरे सामग्री बॉक्स को भरा जा सके और उसका अनुपात बना रहे। इस ऑब्जैक्ट को कटा जाएगा。
none प्रतिस्थापित सामग्री का आकार समायोजित नहीं किया जाता है。
scale-down कंटेंट का आकार none या contain में से एक के समान है, उन दोनों में से जो कम आकार का आबंटन करता है उसके आधार पर यह निर्धारित किया जाता है。
initial इस गुण को उसके डिफ़ॉल्ट मूल्य पर सेट करें। देखें initial.
inherit इस गुण को उसके माता एलीमेंट से विरासत करें। देखें inherit.

तकनीकी विवरण

डिफ़ॉल्ट मूल्य: अलग गुणों को देखें。
विरासत: नहीं
एनिमेशन निर्माण: न समर्थित। देखें:एनिमेशन संबंधी गुण.
संस्करण: CSS3
JavaScript व्याकरण: object.style.objectFit="cover"

ब्राउज़र समर्थन

शेषांक में दिए गए आंकड़े इस गुण का पूर्ण समर्थन करने वाले पहले ब्राउज़र का संस्करण दर्शाते हैं。

क्रोम IE / एज फायरफॉक्स साफारी ओपेरा
31.0 16.0 36.0 7.1 19.0