CSS object-fit প্রতিভূতি
- পূর্ববর্তী পৃষ্ঠা @namespace
- পরবর্তী পৃষ্ঠা object-position
বিবরণ ও ব্যবহার
object-fit বৈশিষ্ট্যটি অ্যাটার করে <img> এবং <video> এর মাপ নির্ধারণ করে কনটেন্ট বক্সকে সামঞ্জস্য করে।
এই বৈশিষ্ট্যটি কনটেন্টকে কীভাবে পূর্ণকরণ করবে তা জানায়। উদাহরণস্বরূপ "অনুপাত সংরক্ষণ" বা "বৃহত্তম জায়গা পূর্ণ করা"。
অন্যান্য দেখুন:
CSS শিক্ষাক্রম:CSS object-fit
CSS সংক্ষিপ্ত হান্ডবুক:CSS object-position
HTML DOM সংক্ষিপ্ত হান্ডবুক:objectFit বৈশিষ্ট্য
প্রয়োগ
ছবিটির দুই পাশের অংশকে কাটা হবে, অসমান অনুপাত সংরক্ষণ করে এবং জায়গা পূর্ণ করুন:
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
CSS 语法
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
বৈশিষ্ট্য মান
| মান | বর্ণনা |
|---|---|
| fill | ডিফল্ট মান। প্রতিস্থাপিত কনটেন্টকে মাপ সংযোজন করা হবে এবং এলিমেন্টের কনটেন্ট বক্সকে ভরাট করতে হবে। যদি প্রয়োজন হয়, অবজেক্টটি সারিয়ে গেছে বা সংকুচিত হবে。 |
| contain | প্রতিস্থাপিত কনটেন্টকে সমানভাবে সমাপ্ত করা হবে এবং এটি এলিমেন্টের কনটেন্ট বক্সকে সামঞ্জস্য করতে হবে。 |
| cover | প্রতিস্থাপিত কনটেন্টের মাপ সংযোজন করা হবে এবং পূর্ণ কনটেন্ট বক্সকে ভরাট করতে করা হবে। যদি প্রয়োজন হয়, অবজেক্টটি কাটা হবে。 |
| none | প্রতিস্থাপিত কনটেন্টটির মাপ সংযোজন করা হবে না。 |
| scale-down | কনটেন্টের মাপ নীল বা contain এর মধ্যে একটির সঙ্গে একই, কারণ তাদের মধ্যে যেটি কম আকারের অবজেক্ট পাওয়া যায় তা হবে তা নির্ধারিত হবে。 |
| initial | এই বৈশিষ্ট্যটির ডিফল্ট মান প্রতিস্থাপিত করুন। দেখুন: initial。 |
| inherit | এই বৈশিষ্ট্যটি পারদর্শী প্রক্রিয়ায় প্রক্রিয়াকরণ করুন। দেখুন: inherit。 |
টেকনিক্যাল বিবরণ
| ডিফল্ট মান: | পৃথক বৈশিষ্ট্যগুলির জন্য দেখুন。 |
|---|---|
| উত্তরসূরী: | না |
| অ্যানিমেশন নির্মাণ: | সমর্থিত না। দেখুন:অ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য。 |
| সংস্করণ: | CSS3 |
| JavaScript 语法： | object.style.objectFit="cover" |
ব্রাউজার সমর্থন
টেবিলের সংখ্যা এই বৈশিষ্ট্যটি যাতে পূর্ণাবস্থায় সমর্থিত প্রথম ব্রাউজারের সংস্করণটির উল্লেখ করে।
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- পূর্ববর্তী পৃষ্ঠা @namespace
- পরবর্তী পৃষ্ঠা object-position
