HTML DOM Style objectFit प्रॉपर्टी

परिचय

HTML DOM Style objectFit प्रॉपर्टी निर्दिष्ट करती है कि HTML दस्तावेज़ में इमेज या वीडियो एलिमेंट को उसके कंटेनर एलिमेंट में फिट करने के लिए कैसे रिसाइज़ किया जाए। यह प्रॉपर्टी रिस्पॉन्सिव डिज़ाइन में बहुत उपयोगी है।

सिंटैक्स

1. objectFit मान प्राप्त करना

object.style.objectFit

2. objectFit मान सेट करना

object.style.objectFit = "value"

मान

उदाहरण

इस उदाहरण में, एक इमेज पर डिफ़ॉल्ट रूप से कोई object-fit नहीं है। जब "Set objectFit" बटन पर क्लिक किया जाता है, तो object-fit: contain लागू होता है, जिससे इमेज अपने आस्पेक्ट रेशियो को बनाए रखते हुए कंटेनर में फिट हो जाती है।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .img-class {
    width: 200px;
    height: 250px;
    border: 2px solid #ddd;
    background: #f0f0f0;
  }
</style>
<body>
<h1 style="text-align:center">DOM Style objectFit प्रॉपर्टी डेमो</h1>
<img alt="Learn Time Series" src="https://www.tutorialspoint.com/time_series/images/time-series-mini-logo.jpg" class="img-class" width='300' height='200'>
<button class="btn" onclick="setFit()">Object Fit सेट करें</button>
<script>
  function setFit() {
    document.querySelector('.img-class').style.objectFit = "contain";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में इमेज अपने मूल आकार में या विकृत होकर दिखाई दे सकती है। "Object Fit सेट करें" बटन पर क्लिक करने पर, इमेज अपने आस्पेक्ट रेशियो को बनाए रखते हुए कंटेनर में पूरी तरह फिट हो जाती है।

कब कौन सा मान उपयोग करें

• contain: जब पूरी इमेज दिखाना जरूरी हो (जैसे: लोगो, आइकन)
• cover: जब कंटेनर पूरी तरह भरना हो और कटौती स्वीकार्य हो (जैसे: बैनर, हीरो इमेज)
• fill: जब आस्पेक्ट रेशियो महत्वपूर्ण न हो
• none: जब मूल आकार बनाए रखना हो

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में पूर्ण समर्थन (IE11+ के लिए आंशिक)।