CSS object-position प्रतियोगिता
- पिछला पृष्ठ ऑब्जेक्ट-फिट
- अगला पृष्ठ ऑफसेट
वर्णन और उपयोग
ऑब्जेक्ट-पोजिशन गुण और ऑब्जेक्ट-फिट को साथ मिलाकर इस्तेमाल करके <img> या <video> के 'अपने सामग्री बॉक्स' में कैसे x/y सतह स्थिति को निर्देशित करें।
और देखें:
CSS शिक्षा:CSS object-fit
CSS संदर्भ दस्तावेज़:CSS object-position
HTML DOM संदर्भ दस्तावेज़:ऑब्जेक्टपोजिशन गुण
उदाहरण
इमेज के आकार को सामग्री बॉक्स के अनुसार आकार बढ़ाएं और इमेज को सामग्री बॉक्स के अंदर बाईं ओर 5px और शीर्ष 10% से खिस्काएं:
img.a {
विडथ: 200px;
हाइट: 400px;
ऑब्जेक्ट-फिट: नहीं;
ऑब्जेक्ट-पोजिशन: 5px 10%;
बॉर्डर: 5px सॉलिड रेड;
}
CSS व्याकरण
ऑब्जेक्ट-पोजिशन: पोजिशन|इनइजियल|इनहेरिट;
गुण मान
| वैल्यू | वर्णन |
|---|---|
| पोजिशन |
इमेज या वीडियो को उसके सामग्री बॉक्स में कहाँ स्थापित करने को निर्देशित करता है。 पहला वैल्यू x अक्ष को नियंत्रित करता है, दूसरा वैल्यू y अक्ष को नियंत्रित करता है。 यह हो सकता है कि यह एक शब्द (लेफ्ट, सेंटर या राइट) या नंबर हो (px या % में)।नकारात्मक मूल्य अनुमति दी जाती है。 |
| इनइजियल | इस गुण को इसके डिफ़ॉल्ट वैल्यू पर सेट करें।देखें: इनइजियल. |
| इनहेरिट | इस गुण को उसके माता एलेमेंट से इनहेरिट करें।देखें: इनहेरिट. |
तकनीकी विवरण
| डिफ़ॉल्ट वैल्यू: | 50% 50% |
|---|---|
| विरासत: | हाँ |
| एनिमेशन निर्माण: | समर्थित है।देखें:एनिमेशन से संबंधित गुण. |
| संस्करण: | CSS3 |
| जेसक्रिप्ट व्याकरण: | ऑब्जेक्ट.स्टाइल.ऑब्जेक्टपोजिशन="0 10%" |
ब्राउज़र समर्थन
तालिका में दिए गए नंबर इस गुण के पूर्णता से समर्थन करने वाले पहले ब्राउज़र का संस्करण को निर्देशित करते हैं。
| च्रोम | IE / एज | फ़ायरफॉक्स | साफ़री | ओपेरा |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- पिछला पृष्ठ ऑब्जेक्ट-फिट
- अगला पृष्ठ ऑफसेट
