CSS object-fit অ্যাট্রিবিউট
- পূর্ববর্তী পৃষ্ঠা CSS ইমেজ স্টাইল
- পরবর্তী পৃষ্ঠা CSS object-position
CSS object-fit এই প্রতিভাটি ব্যবহার করে <img> বা <video> এর মাপ কিভাবে কনটেন্ট বক্সে সাজানো হবে তা নির্দেশ করে。
ব্রাউজার সমর্থন
টেবিলের সংখ্যা এই অ্যাট্রিবিউটটি যে ব্রাউজার প্রথম সম্পূর্ণরূপে সমর্থন করে তা নির্দেশ করে。
| অ্যাট্রিবিউট | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS object-fit অ্যাট্রিবিউট
CSS object-fit এই প্রতিভাটি ব্যবহার করে <img> বা <video> এর মাপ কিভাবে কনটেন্ট বক্সে সাজানো হবে তা নির্দেশ করে。
এই প্রতিভাটি ব্যবহার করে কনটেন্টকে বিভিন্নভাবে কনটেনার ভেতরে পূরণ করা হয়। যেমন, "রাখুন দৈর্ঘ্য ও প্রশস্তকে সমানভাবে" বা "সম্পূর্ণ জায়গা দখল করুন"。
এখানে, শাংহাই ফ্লোরাল পার্ক থেকে আসা টিউলিপ ছবিটি দেখুন, যা ৩০০x৩০০ পিক্সেল:
কিন্তু, যদি উপরের ছবিটিকে ২০০x৩০০ পিক্সেল হিসাবে সমায়োজন করি, তখন এটি এমনভাবে দেখাবে:
ইনস্ট্যান্স
img {
width: 200px;
height: 300px;
}
আমরা দেখব যে ছবিটি ২০০x৩০০ পিক্সেলের কনটেন্ট বক্সে সাজানো হয়েছে, এবং প্রকৃত অসমতুল্যতা বিধ্বস্ত হয়েছে。
যদি আমরা ব্যবহার করি object-fit: cover;এটা ছবিটিকে এমনভাবে কাটাবে যাতে এটি ছবির পাশপাশে কাটা হয়, দৈর্ঘ্য ও প্রশস্তকে রাখে, এবং জায়গা পূরণ করে, এমনভাবে দেখাবে:
ইনস্ট্যান্স
img {
width: 200px;
height: 400px;
object-fit: cover;
}
আরেকটি উদাহরণ
এখানে, আমাদের দুটি ছবি আছে, আমরা চাই যে তারা ব্রাউজার উইন্ডোর ৫০% প্রশস্তকে ও ১০০% উচ্চতা পূরণ করে
এই উদাহরণে, আমরা ব্যবহার করি না object-fitতাই, যখন আমরা ব্রাউজার উইন্ডোর মাপ সমায়োজন করি, তখন ছবির দৈর্ঘ্য ও প্রশস্তকে রাখার অসমতুল্যতা বিধ্বস্ত হবে:
ইনস্ট্যান্স
আগামী উদাহরণে, আমরা ব্যবহার করি object-fit: cover;তাই, যখন আমরা ব্রাউজার উইন্ডোর মাপ সমায়োজন করি, তখন ছবির দৈর্ঘ্য ও প্রশস্তকে রাখার অসমতুল্যতা সংরক্ষণ করা হবে:
ইনস্ট্যান্স
CSS object-fit অ্যাট্রিবিউটের সমস্ত মান
object-fit এই প্রতিভাত এমন মানগুলি গ্রহণ করতে পারে:
fill- ডিফল্ট মান। পুনর্বিন্যস্ত করা কনটেন্টের মাপ সমায়োজন করে উপাদানের কনটেন্ট বক্স পূরণ করুন। প্রয়োজন হলে, উপাদানটিকে সমায়োজন করে এই অবজেক্টটিকে অনুগত করুন。contain- পুনর্বিন্যস্ত করা কনটেন্টকে সমানভাবে সময়সাইজ করে তার অসমতুল্যতা রাখতে, এবং তাকে উপাদানের কনটেন্ট বক্সে রাখুন。cover- পূরণকারী উপাদানের সমগ্র কনটেন্ট বক্সের দৈর্ঘ্য ও প্রশস্তকে সমানভাবে রাখতে, পুনর্বিন্যস্ত করা কনটেন্টের মাপ সমায়োজন করুন। এই অবজেক্টটি কাটানো হবে যাতে এটি মানানসই হয়。none- প্রতিস্থাপিত কনটেন্টকে মাপ সংকুচিত করবে না。scale-down- কনটেন্টের মাপ সংকুচিত করা হয়, যেমন কোনও কনটেন্ট না থাকে বা অন্তর্ভুক্ত কনটেন্ট হিসাবে মনে করা হয় (ক্ষুদ্রতম বিশেষ আকারের নিজস্ব আকার প্রদান করবে)
নিম্নলিখিত উদাহরণটি প্রদর্শন করে object-fit এট্রিবিউটের সমস্ত সম্ভাব্য মান
ইনস্ট্যান্স
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- পূর্ববর্তী পৃষ্ঠা CSS ইমেজ স্টাইল
- পরবর্তী পৃষ্ঠা CSS object-position
