Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

সিএসএস object-fit - CSS object-fit


সিএসএস এর object-fit প্রোপার্টি ব্যবহার করে কোন <img /> বা <video> ট্যাগের মধ্যস্থিত কন্টেন্টকে তার কন্টেইনার অনুসারে মাপ পরিবর্তন বা resized করা যায়।


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

object-fit প্রপার্টি নির্ধারণ করে কিভাবে কোন <img /> বা <video> ট্যাগের মধ্যস্থিত কন্টেন্ট তার কন্টেইনার মাপ পরিবর্তন করবে বা resize হবে।

এই প্রপার্টি কন্টেন্টকে বিভিন্ন ভাবে কন্টেইনার পূর্ণ করতে নির্দেশ করে, যেমন দৈর্ঘ্য ও প্রস্থের অনুপাত ঠিক রেখে কন্টেইনার পূর্ণ করতে হবে।

নিচে একটি উদাহরণ দেখুন, এখানে আমরা 400px X 200px মাপের একটি ছবি ব্যাবহার করেছি।

CSS3 Object Fit proparty

এখন যদি ছবিটিকে 200X400 px এ resize করি তবে তা দেখতে নিচের মত হবে।

CSS3 object-fit:cover proparty

নিচের উদাহরণে কের জন্য সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

img {
  width: 200px;
  height: 200px;
  }

কোড এডিটর


আমরা দেখলাম যে 200X200 px এ resize করার ফলে ছবিটির দৈর্ঘ্য ও প্রস্থের অনুপাত নষ্ট হয়ে গেছে ও ছবিটি squeezed বা চাপা হয়ে প্রদর্শিত হয়েছে।

যদি এখানে object-fit প্রপার্টি ব্যবহার করা হয় এবং এর মান হিসেবে cover নির্ধারণ করা হয়, তবে ছবিটি একদিক বাদপরে যায়, অনুপাত ঠিক রেখেই নির্ধারিত স্থান পূর্ণ করে। নিচে এর ব্যাবহারিক উদাহরন দেখুন।

CSS3 object-fit:cover proparty

নিচে object-fit প্রপার্টি ব্যবহার করে সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
  }

কোড এডিটর



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

object-fit প্রপার্টির জন্য যে সকল মান বা value নির্ধারণ করা যায় সেগুলো নিচে দেখুন।

নিচে উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন যেখানে object-fit প্রপার্টির সকল মান ব্যাবহার করা হয়েছে।

উদাহরণ

.fill {
  object-fit: fill;
  }
  
.contain {
  object-fit: contain;
  }
  
.cover {
  object-fit: cover;
  }
  
.scale-down {
  object-fit: scale-down;
  }
  
.none {
  object-fit: none;
  }

কোড এডিটর



ব্রাউজার সমর্থন

নিচের টেবিলের সংখ্যাগুলো সেই প্রথম ব্রাউজার সংস্করণটিকে নির্দেশ করে যা object-fit প্রপার্টি সম্পূর্ণরুপে সমর্থন করে।

প্রপার্টি
object-fit 31.0 16.0 36.0 7.1 19.0