सीएसएस वस्तु-स्थिति संपत्ति
उदाहरण
किसी छवि के सामग्री बॉक्स में फ़िट होने के लिए उसका आकार बदलें, और छवि को बाईं ओर से 5px और सामग्री बॉक्स के अंदर ऊपर से 10% रखें:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
परिभाषा और उपयोग
संपत्ति का उपयोग ऑब्जेक्ट-फिट के साथ यह object-position
निर्दिष्ट करने के लिए किया जाता है कि कैसे एक <img> या <video> को अपने "स्वयं की सामग्री बॉक्स" के अंदर x/y निर्देशांक के साथ रखा जाना चाहिए।
डिफ़ॉल्ट मान: | 50% 50% |
---|---|
विरासत में मिला: | हां |
एनिमेटेबल: | हां। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.objectPosition = "0 10%" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
सीएसएस सिंटेक्स
object-position: position|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
संबंधित पृष्ठ
CSS ट्यूटोरियल: CSS ऑब्जेक्ट-फिट
CSS संदर्भ: CSS ऑब्जेक्ट-फिट
एचटीएमएल डोम संदर्भ: ऑब्जेक्टपोजिशन प्रॉपर्टी