CSS object-fit प्रॉपर्टी <img> या <video> एलिमेंट के कंटेंट को उसके कंटेनर बॉक्स में फिट करने के लिए रिसाइज करने का तरीका निर्दिष्ट करती है। यह रेस्पॉन्सिव डिजाइन में इमेज हैंडलिंग के लिए अत्यंत उपयोगी है।
उदाहरण
नीचे दिए गए उदाहरण में, object-fit: cover का उपयोग करके इमेज को कंटेनर (250x350px) में एस्पेक्ट रेशियो बनाए रखते हुए कवर किया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width: 250px;
height: 350px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>SWIFT</h2>
<img class="myimg" src="https://www.tutorialspoint.com/assets/videos/courses/67/images/course_67_image.png" alt="Python Data Science" width="300" height="200">
</body>
</html>
व्यावहारिक उपयोग के मामले:
- प्रोफाइल पिक्चर्स:
object-fit: cover+border-radius: 50% - हीरो बैनर:
object-fit: coverफुल-चौड़ाई इमेज के लिए - उत्पाद गैलरी:
object-fit: containपूरे उत्पाद को दिखाने के लिए - वीडियो प्लेयर:
object-fit: containलेटरबॉक्सिंग के लिए
संबंधित प्रॉपर्टी: object-position से कंटेनर के अंदर कंटेंट की स्थिति नियंत्रित करें (डिफ़ॉल्ट: center)।
