CSS object-fit প্রপার্টি একটি এলিমেন্টকে তার কন্টেইনারের প্রস্থ এবং উচ্চতার মধ্যে স্কেল করার জন্য ব্যবহৃত হয়। ব্যাকগ্রাউন্ড ইমেজ এই প্রপার্টির সবচেয়ে সাধারণ ব্যবহার।
Object-Fit এর পাঁচটি মান
১. object-fit: contain
এسپেক্ট রেশিও বজায় রাখে। যদি রেশিও মেলে না, তবে মেলা না এমন দিকগুলোতে বার (bars) দেখায় (পুরনো টিভিতে ওয়াইডস্ক্রিন ভিডিওর মতো)।
২. object-fit: cover
এسپেক্ট রেশিও বজায় রাখে এবং কন্টেন্ট বক্সটি পূরণ করে। রেশিও মেলে না হলে ইমেজ ক্লিপ (crop) হয়।
৩. object-fit: fill
ইমেজটি কন্টেন্ট বক্স পূরণ করতে স্ট্রेच (stretch) হয়, এস্পেক্ট রেশিও বজায় রাখে না।
৪. object-fit: none
ইমেজটি তার মূল আকারে থাকে, কোনো স্কেলিং হয় না।
৫. object-fit: scale-down
none বা contain - যেটি ছোট আকার দেয় সেটি অটোমেটিক বেছে নেয়। সাধারণত contain বেছে নেয়।
Object-Position সহযোগিতা
object-fit এর সাথে object-position ব্যবহার করে ইমেজের কোন অংশ দেখাবে তা নিয়ন্ত্রণ করা যায়।
img {
object-fit: cover;
object-position: 50% 50%; /* সেন্টার */
}
ব্রাউজার সাপোর্ট
ব্রাউজার সাপোর্ট ভালো, তবে পুরনো Internet Explorer, Microsoft Edge বা Opera ব্রাউজারের জন্য চেক করুন।
উপসংহার
object-fit প্রপার্টি রিপ্লেসড এলিমেন্ট (<img>, <video> ইত্যাদি) কন্টেইনারে কীভাবে ফিট হবে তা নিয়ন্ত্রণ করে। object-position এর সাথে মিলিয়ে আরও নির্ভুল নিয়ন্ত্রণ সম্ভব।
