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