object-fit প্রপার্টি

object-fit প্রপার্টি ছবি বা ভিডিওর মতো এলিমেন্টগুলোর দিক অনুপাত বা স্কেলিং নির্ধারণ করে।

সিনট্যাক্স

সিলেক্টর {
	object-fit: fill বা contain বা cover বা none;
}

নিচের টেবিলে object-fit প্রপার্টির প্রধান মানগুলো দেখানো হয়েছে:

মান	বিবরণ
`fill`	এলিমেন্টের দিক অনুপাত উপেক্ষা করে, প্রদত্ত আকারের সাথে মেলানোর জন্য এলিমেন্ট স্কেলিং।
`contain`	এলিমেন্টের দিক অনুপাত বজায় রেখে, প্রদত্ত আকারের সাথে মেলানোর জন্য এলিমেন্ট স্কেলিং।
`cover`	এলিমেন্টের দিক অনুপাত বজায় রেখে, প্রদত্ত এলাকা সম্পূর্ণরূপে পূরণ করার জন্য এলিমেন্টের আকার পরিবর্তন করা।
`none`	এলিমেন্টের মূল আকার সংরক্ষিত হয়।

আসুন আমাদের ছবিটির জন্য দিক অনুপাত সংরক্ষণ না করে নির্দিষ্ট আকার পূরণ করি:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

এবং এখন আসুন ছবিটিকে দিক অনুপাত সংরক্ষণ করে নির্দিষ্ট কন্টেইনার পূরণ করি:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

আসুন আমাদের ছবিটি দিয়ে নির্দিষ্ট কন্টেইনার পূরণ করি যাতে ছবিটির আকার পরিবর্তিত হয় কিন্তু এর দিক অনুপাত সংরক্ষিত থাকে:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

আসুন আমাদের ছবিটি এর মূল আকার সংরক্ষণ করে নির্দিষ্ট কন্টেইনারে রাখি:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}