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

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

সিনট্যাক্স

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

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

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

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат: