HTML DOM Style objectFit প্রপার্টি একটি HTML ডকুমেন্টে একটি ইমেজ বা ভিডিও এলিমেন্ট কীভাবে রিসাইজ হয়ে তার কন্টেইনার এলিমেন্টে ফিট হবে তা রিটার্ন এবং মডিফাই করে।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
১. objectFit রিটার্ন করা
object.objectFit
২. objectFit মডিফাই করা
object.objectFit = “value”
এখানে value হতে পারে:
| মান | ব্যাখ্যা |
|---|---|
| initial | এটি এই প্রপার্টির মানকে এর ডিফল্ট মান সেট করে। |
| inherit | এটি এই প্রপার্টির মানকে এর প্যারেন্ট এলিমেন্ট থেকে ইনহেরিট করে। |
| none | এতে কন্টেন্ট রিসাইজ হয় না। |
| fill | এতে কন্টেন্ট এলিমেন্টের কন্টেন্ট বক্সে ফিল করার জন্য সাইজ করা হয় এবং প্রয়োজনে অবজেক্টকে স্ট্রেচ বা স্কুইশ করা হয়। |
| contain | এতে কন্টেন্ট তার আস্পেক্ট রেশিও বজায় রেখে এলিমেন্টের কন্টেন্ট বক্সের মধ্যে ফিট হওয়ার জন্য স্কেল করা হয়। |
| cover | এতে কন্টেন্ট তার আস্পেক্ট রেশিও বজায় রেখে এলিমেন্টের পুরো কন্টেন্ট বক্সে ফিট হওয়ার জন্য সাইজ বা ক্লিপ করা হয়। |
| scale-down | এতে কন্টেন্ট সাইজ করা হয়। |
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 প্রপার্টি ডেমো</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()">objectFit সেট করুন</button> <script> function set() { document.querySelector('.img-class').style.objectFit = "contain"; } </script> </body> </html>আউটপুট
objectFit সেট করুন বাটনে ক্লিক করুন ইমেজ এলিমেন্টে object fit প্রপার্টি সেট করার জন্য:
