`অবজেক্ট-ফিট` এবং `অবজেক্ট-পজিশন` প্রপার্টিজ

Articles

এই নিবন্ধটি অবজেক্ট-ফিট এবং অবজেক্ট-পজিশন প্রপার্টিজ ব্যাখ্যা করে।

আপনি কিভাবে ছবি এবং ভিডিওর মত অবজেক্ট সাজাতে এবং CSS-এ তা লিখতে হয় তা শিখতে পারেন।

YouTube Video

প্রিভিউর জন্য HTML

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

অবজেক্ট ফিটিং সংক্রান্ত

`অবজেক্ট-ফিট` প্রপার্টি

CSS-এর অবজেক্ট-ফিট প্রপার্টি প্রধানত ইমেজ, ভিডিও এবং অন্যান্য কনটেন্ট কিভাবে তাদের কন্টেইনার এলিমেন্টের মধ্যে ফিট করবে তা নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়। এই প্রপার্টি ব্যবহার করে, আপনি নমনীয়ভাবে নির্দিষ্ট এলিমেন্টগুলির আকার পরিবর্তন এবং নান্দনিকভাবে অবস্থান নির্ধারণ করতে পারেন। যখন কোনো ইমেজ বা ভিডিও প্যারেন্ট এলিমেন্টের মধ্যে ফিট হয় না, তখন তা ট্রিম বা স্কেলিং করে ডিসপ্লে সমন্বয় করার জন্য এটি খুবই কার্যকরী।

`অবজেক্ট-ফিট` এর মানসমূহ

`ফিল` (ডিফল্ট মান)

1img {
2  object-fit: fill;
3}

ফিল হলো ডিফল্ট মান, যেখানে ইমেজ বা ভিডিও জোরপূর্বক প্রসারিত করা হয় প্যারেন্ট এলিমেন্টের প্রস্থ এবং উচ্চতার সাথে সম্পূর্ণ ফিট করার জন্য। এই ক্ষেত্রে, মূল অ্যাসপেক্ট রেশিও উপেক্ষা করা হয়, যা ইমেজ বিকৃতি সৃষ্টি করতে পারে।

এটি প্যারেন্ট এলিমেন্টের আকারের সাথে সম্পূর্ণ ফিট করে।
অ্যাসপেক্ট রেশিও উপেক্ষা করা হওয়ায় ইমেজ বা ভিডিও উল্লম্ব বা আনুভূমিকভাবে প্রসারিত হতে পারে।

`contain`

1img {
2  object-fit: contain;
3}

কন্টেইন কনটেন্টের আকার পরিবর্তন করে যাতে এটি মূল অ্যাসপেক্ট রেশিও বজায় রেখে সম্পূর্ণভাবে প্যারেন্ট এলিমেন্টের মধ্যে ফিট হয়। এটি প্যারেন্ট এলিমেন্টের আকার অতিক্রম করে না, এবং উল্লম্ব বা আনুভূমিক যেকোনো পাশে প্যাডিং থাকতে পারে।

সম্পূর্ণ কনটেন্ট প্রদর্শিত হয়।
মূল অ্যাসপেক্ট রেশিও বজায় রাখার জন্য প্যাডিং (লেটারবক্স অথবা পিলারবক্স এফেক্ট) দেখা যেতে পারে।

`cover`

1img {
2  object-fit: cover;
3}

কভার কনটেন্টের আকার পরিবর্তন করে এবং অ্যাসপেক্ট রেশিও বজায় রেখে সম্পূর্ণভাবে প্যারেন্ট এলিমেন্টটি কভার করে। কিছু কনটেন্ট প্যারেন্ট এলিমেন্টে ফিট করার জন্য ট্রিম করা হতে পারে, কিন্তু পুরো এলিমেন্টটি কন্টেইনার পূর্ণ করে, তাই কোনো ফাঁক থাকে না।

কনটেন্টটি পুরোপুরি প্যারেন্ট এলিমেন্টটি কভার করে।
এটি মূল অনুপাত বজায় রেখে ক্রপ করা হতে পারে।
সাধারণত ব্যাকগ্রাউন্ড ইমেজ বা হিরো সেকশনের ইমেজের জন্য ব্যবহৃত হয়।

`none`

1img {
2  object-fit: none;
3}

none ইমেজ বা ভিডিওকে তাদের মূল আকার এবং অনুপাত অনুযায়ী প্রদর্শন করে। এটি প্যারেন্ট উপাদানের আকারে মানিয়ে নেয় না এবং প্রয়োজন হলে বিষয়বস্তু ওভারফ্লো হয়।

বিষয়বস্তুর মূল আকার বজায় থাকে।
প্যারেন্ট উপাদানের সাথে মানিয়ে নিতে বিষয়বস্তুর আকার পরিবর্তন করা হয় না।

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down হল none এবং contain এর আচরণের সংমিশ্রণ। যদি বিষয়বস্তু প্যারেন্ট উপাদানের সাথে ফিট করে, তবে এটি none এর মতো আচরণ করে, কিন্তু বিষয়বস্তু যদি খুব বড় হয়, তবে এটি contain এর আচরণ প্রয়োগ করে এবং মানানসই করার জন্য স্কেল-ডাউন করা হয়।

যদি বিষয়বস্তু প্যারেন্ট উপাদানের চেয়ে বড় হয় তবে এটি স্কেল-ডাউন করা হয়।
যদি এটি ছোট হয় তবে এটি তার মূল আকারে প্রদর্শিত হয়।

উদাহরণ ব্যবহার

প্যারেন্ট উপাদানের সাথে ব্যাকগ্রাউন্ড ইমেজ মানানসই করা

উদাহরণস্বরূপ, রেস্পনসিভ ডিজাইন মাথায় রেখে পুরো স্ক্রিন জুড়ে একটি ইমেজ ছড়িয়ে দিতে, সাধারণত cover ব্যবহার করা হয়। নিচের কোডটি একটি উদাহরণ যেখানে একটি ইমেজ প্যারেন্ট উপাদানের সাথে শক্তভাবে মানানসই করা হয়েছে, এমনকি তা ক্রপ করা হলেও।

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

এই ক্ষেত্রে, ইমেজটি প্যারেন্ট উপাদানকে পুরোপুরি ঢেকে দেয়, যেকোন স্ক্রিন সাইজে একটি সুন্দর বিন্যাস বজায় রেখে। যদি অনুপাত ভিন্ন হয়, তবে ইমেজের কিছু অংশ দৃশ্যমান নাও হতে পারে, তবে এটি ডিজাইনের উপযুক্ত উপস্থাপনা প্রদান করে।

অনুপাত বজায় রেখে ইমেজ প্রদর্শন করা

পরবর্তী, যদি আপনি পুরো ইমেজটি প্যারেন্ট উপাদানের মধ্যে ফিট করতে চান এবং একই সময়ে এর অনুপাত বজায় রাখতে চান, তবে contain উপযুক্ত।

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

এই উদাহরণে, ইমেজটি কন্টেনারের সাথে ফিট করার জন্য স্কেল-ডাউন করা হয়েছে, ফলে কিছু প্যাডিং তৈরি হয়েছে, তবে মূল ইমেজটি বিকৃত ছাড়াই প্রদর্শিত হয়েছে।

সাধারণ ভুলসমূহ

object-fit ব্যবহার করার সময় একটি সাধারণ ভুল হল প্যারেন্ট উপাদানের আকার নির্ধারণ না করা। object-fit হল একটি প্রোপার্টি যা বিষয়বস্তুকে প্যারেন্ট উপাদানের সাথে মানানসই করে, তাই যদি প্যারেন্ট উপাদানের আকার অস্পষ্ট হয়, তবে প্রত্যাশিত প্রভাব অর্জন করা সম্ভব নয়। নিশ্চিত করুন যে প্যারেন্ট উপাদানটি সঠিকভাবে width বা height সেট করা হয়েছে।

উদাহরণস্বরূপ, নিম্নের কোডে, প্যারেন্ট উপাদানের উচ্চতা নির্ধারিত নয়, তাই object-fit প্রত্যাশিতভাবে কাজ করে না।

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

এই ক্ষেত্রে, আপনাকে প্যারেন্ট উপাদানের উচ্চতা নির্ধারণ করতে হবে বা ফ্লেক্সবক্স বা গ্রিড লেআউট ব্যবহার করে সম্পূর্ণ লেআউট সামঞ্জস্য করতে হবে।

`object-fit` যেখানে ব্যবহার করা উচিত এমন পরিস্থিতি

object-fit গুরুত্বপূর্ণ, বিশেষ করে প্রতিক্রিয়াশীল ডিজাইন এবং বিভিন্ন স্ক্রিন সাইজের জন্য উপযুক্ত ওয়েবসাইটে। উদাহরণস্বরূপ, এটি নিম্নলিখিত ক্ষেত্রে প্রয়োজনীয় হয়:।

যখন আপনি চিত্র বা ভিডিওকে বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শন করতে সামঞ্জস্য করতে চান।
যখন আপনি ব্যাকগ্রাউন্ড চিত্র বা অনুরূপ চিত্র ফুলস্ক্রিনে প্রদর্শন করতে চান এবং ক্রপিংয়ের অনুমতি দিতে চান।
যখন আপনি একটি চিত্রকে তার অনুপাত বজায় রেখে প্যারেন্ট উপাদানের মধ্যে ফিট করতে চান।
যখন আপনি গ্যালারির মতো ক্ষেত্রে চিত্রের আকার ধারাবাহিকভাবে প্রদর্শন করতে চান।

এই পরিস্থিতিতে object-fit ব্যবহার ডিজাইনের সামঞ্জস্য বজায় রাখতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারে।

সারসংক্ষেপ

object-fit একটি শক্তিশালী CSS প্রপার্টি যা আপনাকে ওয়েব পৃষ্ঠায় চিত্র ও ভিডিও কীভাবে তাদের প্যারেন্ট উপাদানের সাথে সম্পর্কিতভাবে প্রদর্শিত হয় তা নমনীয়ভাবে নিয়ন্ত্রণ করতে দেয়। fill, contain, cover, none, এবং scale-down এর মতো বিভিন্ন মান ব্যবহার করে আপনি বিভিন্ন ডিজাইনের প্রয়োজনীয়তা পূরণ করতে পারেন। এটি সঠিকভাবে কীভাবে ব্যবহার করতে হবে তা বুঝে এবং যথাযথ ভাবে প্রয়োগ করে আপনি যথাক্রমে দৃষ্টিনন্দন বিন্যাস অর্জন করতে পারেন।

প্রতিক্রিয়াশীল এবং দৃষ্টিনন্দন ডিজাইন তৈরি করতে object-fit এর ব্যবহার আয়ত্ত করুন।

`object-position` প্রপার্টি

CSS এর object-position প্রপার্টি চিত্র এবং ভিডিওর মতো বিষয়বস্তুকে একটি উপাদানের মধ্যে অবস্থান নিয়ন্ত্রণের জন্য ব্যবহৃত হয়। object-position ব্যবহার করে আপনি বিষয়বস্তুকে নির্দিষ্ট বিন্দুতে অবস্থান দিতে এবং বিন্যাসের সাথে মিল রেখে ভিজ্যুয়াল প্রভাব প্রদান করতে পারেন।

`object-position` এর ওভারভিউ

object-position মূলত মিডিয়া উপাদানগুলিতে, যেমন <img> ট্যাগ এবং <video> ট্যাগে প্রয়োগ করা হয়। এই প্রপার্টি নিয়ন্ত্রণ করে মিডিয়া তার কন্টেইনারের কোথায় প্রদর্শিত হবে। object-fit প্রায়শই object-position এর সাথে ব্যবহার করা হয়, যেখানে object-fit নির্ধারণ করে কীভাবে একটি চিত্র বা ভিডিও ফ্রেম আকারে উপযুক্ত হবে এবং object-position বিষয়বস্তুর প্রদর্শনের অবস্থান সমন্বয় করে।

1img {
2    object-fit: cover;
3    object-position: center;
4}

এই উদাহরণে, চিত্রটি কন্টেইনারে ফিট করার জন্য স্কেল করা হয়েছে (object-fit: cover), এবং এমনভাবে অবস্থান দেওয়া হয়েছে যাতে কেন্দ্রীয় অংশ প্রদর্শিত হয় (object-position: center)।

মান নির্ধারণের পদ্ধতি

object-position দুটি মান দিয়ে নির্দিষ্ট করা হয় নিম্নলিখিতভাবে:।

অনুভূমিক অবস্থান (X-অক্ষ)
উল্লম্ব অবস্থান (Y-অক্ষ)

মান নির্ধারণের ফরম্যাট

object-position এ, আপনি নিম্নলিখিত ফরম্যাটে মান নির্ধারণ করতে পারেন।

কীওয়ার্ড: শীর্ষ, ডান, নিচ, বাম, কেন্দ্র
শতাংশ: 0% থেকে 100%
দৈর্ঘ্যের একক: px, em, rem, ইত্যাদি

উদাহরণস্বরূপ, আপনি এটি এভাবে ব্যবহার করতে পারেন।

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

কীওয়ার্ড এবং শতাংশের মিশ্রণ

কীওয়ার্ড এবং শতাংশ মিশ্রণ করাও সম্ভব।

1img {
2    object-position: right 50%;
3}

এই উদাহরণে, চিত্রটি ডান প্রান্তে স্থাপন করা হয়েছে এবং ৫০% উল্লম্বভাবে কেন্দ্রীভূত। অতিমাত্রায় স্থিতিস্থাপক অবস্থান প্রয়োজন হলে এই মিশ্রণটি খুবই কার্যকর।

`object-fit` এর সাথে মিশ্রণ

object-position প্রায়শই object-fit এর সাথে একত্রে ব্যবহৃত হয়। object-fit নির্ধারণ করে চিত্র বা ভিডিও তার ফ্রেমের সাথে সাপেক্ষে কীভাবে আকার পরিবর্তন করবে। উদাহরণস্বরূপ, object-fit: cover ব্যবহার করে চিত্রটি ফ্রেমের সাথে মাপসই করার জন্য ছাঁটা হয় এবং নির্দিষ্ট object-position অনুযায়ী সেট করা হয়।

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

এই উদাহরণে, চিত্রটি পুরো কন্টেইনার জুড়ে বিস্তৃত হয় এবং বিষয়বস্তুর ডান কর্ণের নিচের অংশ প্রদর্শন করে।

`object-fit` এর মানগুলোর সাথে মিলিত উদাহরণ

fill: চিত্রটি বিকৃত হতে পারে, তবে এটি পুরো কন্টেইনারে মানানসই হয়।
contain: পুরো চিত্রটি প্রদর্শিত হয় এবং অনুপাত বজায় রাখা হয়।
cover: অনুপাত বজায় রেখে কন্টেইনারের সাথে মানানসই করার জন্য ছাঁটা হয়।
none: চিত্রটি তার মূল আকারে প্রদর্শিত হয়।

1img {
2    object-fit: contain;
3    object-position: top;
4}

এই সেটিংয়ে, চিত্রটি কন্টেইনারের শীর্ষে স্থাপন করা হয় এবং পুরো চিত্রটি প্রদর্শিত হয়।

উন্নত ব্যবহার

object-position বিভিন্ন ক্ষেত্রে প্রয়োগ করা যেতে পারে, শুধু সাধারণ অবস্থান সামঞ্জস্য করার জন্য নয় বরং ভিজ্যুয়াল প্রভাব বাড়ানোর জন্য।

চিত্রের একটি অংশের উপর জোর দেওয়া

যখন আপনি পুরো চিত্রটি প্রদর্শন না করে চিত্রের নির্দিষ্ট একটি অংশের উপর মনোযোগ দিতে চান তখন এটি উপকারী। object-fit কে cover তে সেট করুন এবং একটি নির্দিষ্ট এলাকা কেন্দ্রবিন্দু করার জন্য object-position ব্যবহার করুন।

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

এই উদাহরণে, চিত্রটির বাম নিচের অংশ প্রদর্শিত হয়, যা গুরুত্বপূর্ণ অংশগুলোর উপর জোর দেয়।

ভিডিওকে পটভূমি হিসাবে ব্যবহার করার সময়

ভিডিওকে পটভূমি হিসাবে ব্যবহার করার সময় object-position ও কার্যকর প্রমাণিত হয়। আপনি ভিডিওকে নির্দিষ্ট স্থানে স্থাপন করে সামগ্রিক পেজ ডিজাইনের সামঞ্জস্য বজায় রাখতে পারেন।

1video {
2    object-fit: cover;
3    object-position: center top;
4}

এই সেটিংয়ে, ভিডিওটি পুরো পাতা জুড়ে থাকে এবং উপর-কেন্দ্রে অবস্থান করে।

সাধারণ সমস্যা এবং সমাধান

object-position ব্যবহার করার সময় কিছু সমস্যা হতে পারে। এখানে, আমরা সাধারণ সমস্যাগুলি এবং তাদের সমাধান উপস্থাপন করছি।

ছবির একটি অংশ কেটে যাচ্ছে

object-fit: cover ব্যবহার করার সময়, ছবি কনটেইনারের সাথে মানানসই করার জন্য কেটে যেতে পারে। এই ক্ষেত্রে, object-position এর মাধ্যমে প্রদর্শনের অবস্থান সমন্বয়ের মাধ্যমে গুরুত্বপূর্ণ অংশগুলি প্রদর্শিত হয় তা নিশ্চিত করতে পারেন।

1img {
2    object-fit: cover;
3    object-position: center;
4}

ছবির অবস্থান প্রত্যাশিত নয়

শতাংশ নির্দিষ্টীকরণ সবসময় সঠিকভাবে অনুমানযোগ্য নাও হতে পারে। কনটেইনারের আকার এবং অনুপাত বিবেচনা করা এবং বিভিন্ন মানের সাথে পরীক্ষা করা প্রয়োজন। রিয়েল-টাইমে সামঞ্জস্য করার জন্য ডেভেলপার টুল ব্যবহার করা কার্যকর।

সারসংক্ষেপ

object-position মিডিয়া উপাদানগুলির অবস্থান নির্ধারণের জন্য একটি শক্তিশালী টুল। object-fit এর সাথে মিলিয়ে ব্যবহার করে, ডিজাইনের সাথে মানানসই নমনীয় লেআউট অর্জন করা যায়। বিভিন্ন পরিস্থিতিতে ভিজ্যুয়াল ইফেক্ট বাড়ানোর জন্য কীওয়ার্ড, শতাংশ, এবং দৈর্ঘ্যের একক আয়ত্ত করুন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

`overflow` এবং `contain` বৈশিষ্ট্যগুলি

`অবজেক্ট-ফিট` এবং `অবজেক্ট-পজিশন` প্রপার্টিজ

YouTube Video

প্রিভিউর জন্য HTML

অবজেক্ট ফিটিং সংক্রান্ত

অবজেক্ট-ফিট প্রপার্টি

অবজেক্ট-ফিট এর মানসমূহ

ফিল (ডিফল্ট মান)

contain

cover

none

scale-down

উদাহরণ ব্যবহার

প্যারেন্ট উপাদানের সাথে ব্যাকগ্রাউন্ড ইমেজ মানানসই করা

অনুপাত বজায় রেখে ইমেজ প্রদর্শন করা

সাধারণ ভুলসমূহ

object-fit যেখানে ব্যবহার করা উচিত এমন পরিস্থিতি

সারসংক্ষেপ

object-position প্রপার্টি

object-position এর ওভারভিউ

মান নির্ধারণের পদ্ধতি

মান নির্ধারণের ফরম্যাট

কীওয়ার্ড এবং শতাংশের মিশ্রণ

object-fit এর সাথে মিশ্রণ

object-fit এর মানগুলোর সাথে মিলিত উদাহরণ

উন্নত ব্যবহার

চিত্রের একটি অংশের উপর জোর দেওয়া

ভিডিওকে পটভূমি হিসাবে ব্যবহার করার সময়

সাধারণ সমস্যা এবং সমাধান

ছবির একটি অংশ কেটে যাচ্ছে

ছবির অবস্থান প্রত্যাশিত নয়

সারসংক্ষেপ

YouTube Video

`অবজেক্ট-ফিট` প্রপার্টি

`অবজেক্ট-ফিট` এর মানসমূহ

`ফিল` (ডিফল্ট মান)

`contain`

`cover`

`none`

`scale-down`

`object-fit` যেখানে ব্যবহার করা উচিত এমন পরিস্থিতি

`object-position` প্রপার্টি

`object-position` এর ওভারভিউ

`object-fit` এর সাথে মিশ্রণ

`object-fit` এর মানগুলোর সাথে মিলিত উদাহরণ