সিএসএস৩-এর object-position প্রপার্টি একটি ইমেজ বা ভিডিওর মতো রিপ্লেসড কন্টেন্ট (replaced content) কিভাবে কন্টেইনারের মধ্যে প্রদর্শিত হবে তা নির্ধারণ করতে ব্যবহৃত হয়। যখন object-fit প্রপার্টি ব্যবহার করে কন্টেন্টকে স্কেল বা রিসাইজ করা হয়, তখন object-position ব্যবহার করে কন্টেন্টটি কন্টেইনারের মধ্যে সুনির্দিষ্টভাবে অবস্থান নির্ধারণ করা যায়।
object-position এর গুরুত্ব
যখন একটি ইমেজ বা ভিডিও কন্টেইনারের আকার অনুযায়ী object-fit ব্যবহার করে স্কেল হয়, তখন কন্টেন্টটি কখনো পুরোপুরি দৃশ্যমান নাও হতে পারে। object-position ব্যবহার করে নির্ধারণ করা যায়, কন্টেইনারের ভেতরে কন্টেন্টটি কোন অংশ ফোকাস বা দৃশ্যমান থাকবে। উদাহরণস্বরূপ, ইমেজের একটি নির্দিষ্ট অংশ প্রদর্শন করা।
সিনট্যাক্স
object-position: value;
value-এর মধ্যে পজিশনের জন্য ভ্যালু দেওয়া হয়, যা হতে পারে:
- কিওয়ার্ড ভ্যালু:
top,bottom,left,right,center। - পিক্সেল বা শতাংশ (%) ভ্যালু: যেমন
50% 50%, যা কন্টেইনারের এক্স এবং ওয়াই অক্ষ বরাবর পজিশন নির্ধারণ করে।
object-position প্রপার্টির ডিফল্ট ভ্যালু
ডিফল্ট ভ্যালু হলো:
object-position: 50% 50%;
এটি ইমেজ বা ভিডিওর কেন্দ্রে পজিশন নির্ধারণ করে।
উদাহরণ: object-position ব্যবহার
উদাহরণ ১: ইমেজের নির্দিষ্ট অংশ ফোকাস করা
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top left;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Example Image">
</body>
</html>
ব্যাখ্যা:
- এখানে ইমেজটি কন্টেইনারে cover মোডে স্কেল করা হয়েছে।
- কন্টেইনারে ইমেজের উপরের বাম (top left) অংশ ফোকাস করা হয়েছে।
উদাহরণ ২: সেন্টার থেকে শিফট করা পজিশন
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 400px;
height: 250px;
object-fit: cover;
object-position: 20% 40%;
}
</style>
</head>
<body>
<img src="example.jpg" alt="Shifted Image">
</body>
</html>
ব্যাখ্যা:
- ইমেজটি কন্টেইনারে স্কেল করা হয়েছে।
- এক্স-অক্ষ বরাবর 20% এবং ওয়াই-অক্ষ বরাবর 40% পজিশনে ইমেজটি অবস্থান করছে।
object-position এর ভ্যালু সমূহ
| ভ্যালু | বর্ণনা |
|---|---|
| center | কন্টেন্টের কেন্দ্রস্থলে রাখে। |
| top | কন্টেন্টের উপরিভাগে রাখে। |
| bottom | কন্টেন্টের নিচের দিকে রাখে। |
| left | কন্টেন্টের বাম দিকে রাখে। |
| right | কন্টেন্টের ডান দিকে রাখে। |
| % বা px ভ্যালু | এক্স এবং ওয়াই অক্ষ বরাবর নির্দিষ্ট অবস্থান। |
object-position বনাম background-position
object-position শুধুমাত্র রিপ্লেসড কন্টেন্ট যেমন ইমেজ বা ভিডিওর জন্য প্রযোজ্য। অপরদিকে, background-position ব্যাকগ্রাউন্ড ইমেজের পজিশন নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
তুলনামূলক উদাহরণ
/* object-position */
img {
object-position: center;
object-fit: cover;
}
/* background-position */
div {
background-image: url('background.jpg');
background-position: center;
background-size: cover;
}
সেরা চর্চা
- object-fit এর সঙ্গে ব্যবহার করুন**: object-position তখনই কার্যকর হয় যখন object-fit ব্যবহার করা হয়।
- প্রাসঙ্গিক পজিশন নির্বাচন করুন: ইমেজ বা ভিডিওর গুরুত্বপূর্ণ অংশ দৃশ্যমান রাখতে উপযুক্ত পজিশন বেছে নিন।
- ডিবাগিংয়ে হেল্পফুল: ভিজ্যুয়াল কন্টেন্ট ঠিকভাবে প্রদর্শিত না হলে object-position সমন্বয় করুন।
object-position প্রপার্টি সিএসএস৩-এ কন্টেন্ট পজিশনিং সহজ এবং কার্যকর করে, বিশেষ করে স্কেল করা ইমেজ বা ভিডিওর ক্ষেত্রে। এটি সঠিক ফোকাস নির্ধারণে ডিজাইনারদের জন্য অপরিহার্য।
Read more
