CSS में object-position प्रॉपर्टी

object-position प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि किसी इमेज या वीडियो को उसके अपने बॉक्स के अंदर कैसे स्थित किया जाना चाहिए। यह object-fit के साथ मिलकर काम करता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      img.demo { 
        width: 200px; 
        height: 200px; 
        object-fit: none; 
        object-position: 10px 20%; 
        border: 2px dashed yellow; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>डेमो हेडिंग</h2> 
    <img class="demo" src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="400" height="250"> 
    <h2>Memcached ट्यूटोरियल</h2> 
    <img src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="300" height="250"> 
  </body> 
</html>

आउटपुट

व्याख्या: पहली इमेज में object-fit: none (अपने आकार में रहती है) और object-position: 10px 20% (बाएं से 10px, ऊपर से 20%) सेट है, इसलिए केवल इमेज का एक भाग 200x200 बॉक्स में दिखता है। दूसरी इमेज डिफ़ॉल्ट व्यवहार दिखाती है।