CSS object-fit प्रॉपर्टी निर्दिष्ट करती है कि <img> या <video> एलिमेंट का कंटेंट अपने बॉक्स (कंटेनर) को कैसे भरना चाहिए। यह एस्पेक्ट रेशियो बनाए रखते हुए रिसाइजिंग को नियंत्रित करती है।
object-fit के मुख्य मान:
- contain: कंटेंट एस्पेक्ट रेशियो बनाए रखते हुए कंटेनर में फिट होने के लिए स्केल होता है (पूरा कंटेंट दिखता है, लेटरबॉक्सिंग हो सकती है)
- cover: कंटेंट एस्पेक्ट रेशियो बनाए रखते हुए पूरे कंटेनर को कवर करने के लिए स्केल होता है (कटौती/क्रॉप हो सकती है)
- fill: कंटेंट कंटेनर को पूरी तरह भरने के लिए स्ट्रेच होता है (एस्पेक्ट रेशियो नहीं रखा जाता)
- none: कंटेंट रिसाइज नहीं होता (डिफ़ॉल्ट आकार)
- scale-down:
noneयाcontainमें से जो छोटा हो
उदाहरण (cover मान)
नीचे दिए गए उदाहरण में, object-fit: fill का उपयोग किया गया है (नोट: टेक्स्ट में cover बताया गया है लेकिन कोड में fill है)।
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width: 250px;
height: 350px;
object-fit: fill;
}
</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 के लिए इमेज/वीडियो पर width और height दोनों निर्दिष्ट होना आवश्यक है।
