HTML DOM स्टाइल ऑब्जेक्टफ़िट प्रॉपर्टी वापस आती है और संशोधित करती है कि किसी HTML दस्तावेज़ में एक छवि या वीडियो तत्व को उसके कंटेनर तत्व में फिट करने के लिए कैसे आकार दिया जाना चाहिए।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. रिटर्निंग ऑब्जेक्टफ़िट
object.objectFit
2. ऑब्जेक्ट फ़िट को संशोधित करना
object.objectFit = “value”
यहां, मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| प्रारंभिक | इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया। |
| उत्तराधिकारी | यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है। |
| कोई नहीं | इसमें सामग्री का आकार नहीं बदला जाता है। |
| भरें | इसमें सामग्री को तत्व के सामग्री बॉक्स को भरने के लिए आकार दिया जाता है और यदि आवश्यक हो तो सामग्री बॉक्स में फिट करने के लिए वस्तु को बढ़ाया या निचोड़ा जाएगा। |
| शामिल हैं | इसमें सामग्री को एक HTML दस्तावेज़ में तत्व के सामग्री बॉक्स में फ़िट करते हुए उसके पहलू अनुपात को बनाए रखने के लिए बढ़ाया जाता है। |
| कवर | इसमें सामग्री को आकार दिया जाता है या HTML दस्तावेज़ में तत्व के संपूर्ण सामग्री बॉक्स को फ़िट करते हुए इसके पहलू अनुपात को बनाए रखने के लिए क्लिप किया जाता है। |
| स्केल-डाउन | इसमें सामग्री का आकार होता है। |
आइए हम HTML DOM Style objectFit प्रॉपर्टी का एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.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;
}
</style>
<body>
<h1 style="text-align:center">DOM Style objectFit Property Demo</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="set()">Set objectFit</button>
<script>
function set() {
document.querySelector('.img-class').style.objectFit = "contain";
}
</script>
</body>
</html> आउटपुट
“ऑब्जेक्ट फ़िट सेट करें . पर क्लिक करें इमेज एलिमेंट पर ऑब्जेक्ट फ़िट प्रॉपर्टी सेट करने के लिए बटन -
