X

X

X

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


কোনো <img> বা <video> তার প্যারেন্ট ইলামেন্টের সাপেক্ষে কিভাবে উস্থাপিত হবে, তা বর্ণনা করার জন্য CSS object-fit property ব্যবহার করা হয়। এটি দিয়ে মূলত কোনো <img> বা <video> ইলামেন্টকে রেসপনসিভ করা হয়।


Browser Support

Property
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit Property

কোনো <img> বা <video> তার প্যারেন্ট ইলামেন্টের সাপেক্ষে কিভাবে উস্থাপিত হবে, তা বর্ণনা করার জন্য CSS object-fit property ব্যবহার করা হয়।

নিচের ছবিটি লক্ষ্য করুণ : ( 400×300 pixel)

Paris

কিন্তু যদি আমরা ছবিটিকে 200×400 pixels এর বেশি মান দিয়ে উপস্থাপণ করি, তবে এটি নিচের মত উপস্থাপিত হবে:

Paris

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

দেখা যাচ্ছে যে, ছবিটিকে 200×400 pixel এ উপস্থাপণ করার ফলে ছটিটি আনুভূমিকভাবে সংকুচিত হয়েছে এবং এর মূল aspect ratio কাজ করছে না।

এখন যদি object-fit: cover; ব্যবহার করা হয়, তবে ছবিটির চারপাশ থেকে প্রয়োজন অনুযায়ী কিছু অংশ কর্তিত হবে, যাতে ছবিটি তার প্যারেন্ট ইলামেন্টের পুরো এরিয়া কাভার করে।

Paris

Code Example

<!DOCTYPE html>
<html>
<body>

<h2>Not Using object-fit</h2>
<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>

<div style="width:100%;height:400px;">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরেকটি উদাহরণ

নিচে দুটি ছবিকে পাশাপাশি উপস্থাপণ করা হলো। এদের প্রস্থের মান সেট করা হলো ৫০% এবং উচ্চতা ১০০%। যখন ব্রাউজারের প্রস্থ পরিবর্তিত হবে, ছবিগুলোর প্রস্থও পরিবর্তিত হবে।

নিচের উদাহরণে object-fit ব্যবহৃত হয়নি, কাজেই যখন ব্রাউজার সাইজ পরিবর্তিত হয়, তখন ছবিটির aspect ratio কাজ করবে না:

Code Example

<!DOCTYPE html>
<html>
<body>

<h2>Not Using object-fit</h2>
<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>

<div style="width:100%;height:400px;">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে object-fit: cover; ব্যবহার করা হয়েছে, কাজেই যখন ব্রাউজার সাইজ পরিবর্তিত হয়, তখন ছবিটির aspect ratio সঠিকভাবে কাজ করে:

Code Example

<!DOCTYPE html>
<html>
<body>

<h2>Using object-fit</h2>
<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>

<div style="width:100%;height:400px;">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS object-fit Property -এর মান সমূহ

object-fit property এর জন্য নিম্নোক্ত মানসূমহ ব্যবহৃত হয়:

  • fill – এটি default মান। স্বাভাবিকভাবে একটি ছবিকে আমরা যেভাবে দেখি এটি সেই অবস্থা তৈরি করার জন্য ব্যবহৃত হয়। অর্থাৎ, যখন প্যারেন্ট ইলামন্টের সাইজ বৃদ্ধিপাবে, ছবিটিও স্বয়ংক্রিয়ভাবে বৃদ্বিপাবে।
  • contain – কন্টেন্টের মান aspect ratio অনুযায়ী পরিবর্তিত হয়।
  • cover – কন্টেন্টের মান aspect ratio অনুযায়ী পরিবর্তিত হয়, কিন্তু এক্ষেত্রে কিছু অংশ কর্তিত হতে পারে।
  • none – কন্টেন্টের কোনো পরিবর্তন হয় না।
  • scale-down

নিচে object-fit property এর সবগুলো মানের ব্যবহার দেখানো হলো:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।