এইচটিএমএল ডম স্টাইল অবজেক্টফিট প্রপার্টি রিটার্ন করে এবং সংশোধন করে কিভাবে একটি এইচটিএমএল ডকুমেন্টে একটি ইমেজ বা ভিডিও এলিমেন্টের কন্টেইনার এলিমেন্ট ফিট করার জন্য রিসাইজ করা উচিত।
সিনট্যাক্স
নিম্নলিখিত সিনট্যাক্স −
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> আউটপুট
“সেট অবজেক্টফিট-এ ক্লিক করুন ইমেজ এলিমেন্ট -
-এ অবজেক্ট ফিট প্রপার্টি সেট করতে ” বোতাম
