`object-fit` और `object-position` प्रॉपर्टीज़

Articles

यह लेख object-fit और object-position प्रॉपर्टीज़ को समझाता है।

आप सीख सकते हैं कि चित्रों और वीडियो जैसे ऑब्जेक्ट्स को कैसे व्यवस्थित करें और 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 : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&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="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&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="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</html>

ऑब्जेक्ट फिटिंग संबंधित

`object-fit` प्रॉपर्टी

CSS की object-fit प्रॉपर्टी मुख्य रूप से यह नियंत्रित करने के लिए उपयोग की जाती है कि चित्र, वीडियो, और अन्य सामग्री उनके कंटेनर एलिमेंट्स में कैसे फिट हो। इस प्रॉपर्टी का उपयोग करके आप लचीलापन के साथ निर्दिष्ट एलिमेंट्स का आकार बदलने और उन्हें सुरुचिपूर्ण ढंग से व्यवस्थित करने की विधि निर्दिष्ट कर सकते हैं। यह छवि या वीडियो को ट्रिम या स्केल करके उनकी डिस्प्ले को समायोजित करने के लिए बहुत उपयोगी है, जब वे पैरेंट एलिमेंट के भीतर फिट न हों।

`object-fit` की मान

`fill` (डिफ़ॉल्ट मान)

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

fill डिफ़ॉल्ट मान है, जहां छवि या वीडियो को पैरेंट एलिमेंट की चौड़ाई और ऊंचाई को पूरी तरह से भरने के लिए मजबूर किया जाता है। इस स्थिति में, मूल अस्पेक्ट रेशियो को अनदेखा किया जाता है, जिससे छवि विकृत हो सकती है।

यह पैरेंट एलिमेंट के आकार में पूरी तरह फिट होता है।
क्योंकि अस्पेक्ट रेशियो को अनदेखा किया जाता है, छवियां या वीडियो लंबवत या क्षैतिज रूप से खिंच सकते हैं।

`contain`

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

contain प्रॉपर्टी सामग्री का आकार इस प्रकार बदलता है कि वह पैरेंट एलिमेंट के अंदर पूरी तरह फिट हो जाए और साथ ही अस्पेक्ट रेशियो को भी बनाए रखे। यह पैरेंट एलिमेंट के आकार को पार नहीं करता है, और ऊर्ध्वाधर या क्षैतिज दिशा में पैडिंग हो सकती है।

पूरी सामग्री प्रदर्शित होती है।
मूल अस्पेक्ट रेशियो बनाए रखने के लिए, पैडिंग (लेटरबॉक्स या पिलरबॉक्स प्रभाव) दिख सकती है।

`cover`

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

cover सामग्री का आकार बदलता है ताकि वह पैरेंट एलिमेंट को पूरी तरह कवर करे और साथ ही अस्पेक्ट रेशियो बनाए रखे। कुछ सामग्री को पैरेंट एलिमेंट में फिट करने के लिए ट्रिम किया जा सकता है, लेकिन पूरा एलिमेंट कंटेनर को भर देता है, जिससे कोई खाली जगह नहीं रहती।

सामग्री पूरी तरह पैरेंट एलिमेंट को कवर करती है।
यह अपनी मूल आस्पेक्ट अनुपात को बनाए रखते हुए काटा जा सकता है।
आमतौर पर पृष्ठभूमि छवियों या हीरो सेक्शन छवियों के लिए उपयोग किया जाता है।

`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 सामग्री को पैरेंट एलिमेंट में फिट करने का एक गुण है, इसलिए यदि पैरेंट एलिमेंट का आकार स्पष्ट नहीं है, तो अपेक्षित प्रभाव प्राप्त नहीं किया जा सकता। सुनिश्चित करें कि पैरेंट एलिमेंट का चौड़ाई या ऊंचाई सही तरीके से सेट है।

उदाहरण के लिए, निम्नलिखित कोड में, पैरेंट एलिमेंट की ऊंचाई निर्दिष्ट नहीं है, इसलिए 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: 150px; 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-position` प्रॉपर्टी

CSS की object-position प्रॉपर्टी का उपयोग छवियां और वीडियो जैसी सामग्री को किसी तत्व के भीतर स्थिति नियंत्रित करने के लिए किया जाता है। object-position का उपयोग करके, आप सामग्री को विशेष बिंदुओं पर रख सकते हैं और लेआउट के अनुरूप दृश्य प्रभाव प्रदान कर सकते हैं।

`object-position` का अवलोकन

object-position का मुख्य रूप से मीडिया तत्वों जैसे <img> टैग और <video> टैग पर उपयोग किया जाता है। यह प्रॉपर्टी नियंत्रित करती है कि मीडिया उसके कंटेनर में कहाँ प्रदर्शित हो। object-fit को अक्सर object-position के साथ इस्तेमाल किया जाता है, जहां object-fit यह निर्धारित करता है कि छवि या वीडियो फ्रेम आकार में कैसे फिट होगा, और object-position सामग्री के प्रदर्शन की स्थिति को समायोजित करता है।

मान निर्दिष्ट करने का तरीका

object-position एक, दो, या चार मानों का उपयोग करके स्थिति निर्दिष्ट कर सकता है। हालाँकि, चार मान निर्दिष्ट करना पुराने ब्राउज़रों द्वारा समर्थित नहीं हो सकता है।

एक मान निर्दिष्ट करना

यदि केवल एक मान निर्दिष्ट किया जाता है, तो उसे क्षैतिज (X-अक्ष) स्थिति के रूप में समझा जाता है, और ऊर्ध्वाधर (Y-अक्ष) अपने आप center पर सेट हो जाता है।

जब इसे object-position: left; के रूप में निर्दिष्ट किया जाता है, तो ऑब्जेक्ट को बाईं ओर स्थित किया जाता है।
object-position: 70%; के रूप में निर्दिष्ट करने पर, ऑब्जेक्ट क्षैतिज रूप से 70% और ऊर्ध्वाधर रूप से केंद्रित स्थित होता है।
object-position: 50px; के रूप में निर्दिष्ट करने पर, ऑब्जेक्ट बाईं ओर से 50px पर और ऊर्ध्वाधर रूप से केंद्रित स्थित होता है।

दो मान निर्दिष्ट करना

दो मान निर्दिष्ट करने से आप क्षैतिज (X-अक्ष) और ऊर्ध्वाधर (Y-अक्ष) स्थिति को अलग-अलग सेट कर सकते हैं।

object-position: center center; निर्दिष्ट करने पर, ऑब्जेक्ट केंद्रित स्थित होता है।
object-position: right top; निर्दिष्ट करने पर, ऑब्जेक्ट को ऊपर दाईं ओर स्थित किया जाता है।
object-position: 75% 20%; निर्दिष्ट करने पर, ऑब्जेक्ट क्षैतिज रूप से 75% और ऊर्ध्वाधर रूप से 20% पर स्थित होता है।
object-position: 50px 25px; के रूप में निर्दिष्ट करने पर, ऑब्जेक्ट बाईं ओर से 50px और ऊपर से 25px स्थित होता है।

चार मान निर्दिष्ट करना

चार मान निर्दिष्ट करके, आप left या top जैसे कीवर्ड और उनके ऑफसेट का उपयोग करके अधिक विस्तृत स्थिति दे सकते हैं।

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;

object-position: left 10px top 20px; निर्दिष्ट करने पर, ऑब्जेक्ट बाईं ओर से 10px और ऊपर से 20px पर स्थित होता है।
object-position: right 15% bottom 30px; निर्दिष्ट करने पर, ऑब्जेक्ट दाईं ओर से 15% और नीचे से 30px पर स्थित होता है।

मान विशिष्टता प्रारूप

object-position निम्नलिखित मान प्रारूपों को स्वीकार कर सकता है।

आप top, right, bottom, left, और center जैसे कीवर्ड निर्दिष्ट कर सकते हैं।
आप प्रतिशत जैसे 50% या इकाइयाँ जैसे px का उपयोग करके भी मान निर्दिष्ट कर सकते हैं।

उदाहरण के लिए, आप इसे इस प्रकार उपयोग कर सकते हैं।

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}

इस उदाहरण में, छवि को दाईं किनारे पर रखा गया है और इसे 50% पर ऊर्ध्वाधर रूप से केंद्रित किया गया है। यह संयोजन तब बहुत उपयोगी होता है जब लचीली स्थिति की आवश्यकता होती है।

`object-fit` के साथ संयोजन

object-position का अक्सर object-fit के साथ उपयोग किया जाता है। object-fit यह निर्धारित करता है कि किसी छवि या वीडियो को उसके फ्रेम के सापेक्ष कैसे पुन: आकार दिया जाता है। उदाहरण के लिए, object-fit: cover का उपयोग छवि को फ्रेम में फिट करने के लिए काटता है और इसे निर्दिष्ट object-position के अनुसार स्थिति देता है।

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

इस उदाहरण में, छवि पूरे कंटेनर में फैली हुई है, और सामग्री के निचले दायें भाग को प्रदर्शित करती है।

`object-fit` मानों के साथ संयुक्त उदाहरण

आप object-fit के लिए निम्नलिखित मान निर्दिष्ट कर सकते हैं।

fill: छवि विकृत हो सकती है, लेकिन यह पूरे कंटेनर को फिट करती है।
contain: संपूर्ण छवि को उसके अनुपात बनाए रखते हुए प्रदर्शित किया जाता है।
cover: कंटेनर में फिट करने के लिए काटा गया, अनुपात बनाए रखते हुए।
none: छवि को उसके मूल आकार में प्रदर्शित किया जाता है।

उदाहरण के लिए, object-fit: contain का उपयोग करने से पूरी छवि दिखाई देती है और इसे object-position सेटिंग के अनुसार स्थित किया जाता है।

1img {
2    object-fit: contain;
3    object-position: right;
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 चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

`overflow` और `contain` गुण पारदर्शिता से संबंधित CSS गुण

`object-fit` और `object-position` प्रॉपर्टीज़

YouTube Video

प्रीव्यू के लिए HTML

ऑब्जेक्ट फिटिंग संबंधित

object-fit प्रॉपर्टी

object-fit की मान

fill (डिफ़ॉल्ट मान)

contain

cover

none

scale-down

उदाहरण उपयोग

पृष्ठभूमि छवियों को पैरेंट एलिमेंट में फिट करना

आस्पेक्ट अनुपात बनाए रखते हुए छवियों को प्रदर्शित करना

सामान्य गलतियाँ

object-fit का उपयोग करने वाले हालात

सारांश

object-position प्रॉपर्टी

object-position का अवलोकन

मान निर्दिष्ट करने का तरीका

एक मान निर्दिष्ट करना

दो मान निर्दिष्ट करना

चार मान निर्दिष्ट करना

मान विशिष्टता प्रारूप

कीवर्ड और प्रतिशत का संयोजन

object-fit के साथ संयोजन

object-fit मानों के साथ संयुक्त उदाहरण

उन्नत उपयोग

छवि के एक भाग पर जोर देना

जब एक वीडियो को पृष्ठभूमि के रूप में उपयोग किया जाता है

सामान्य समस्याएँ और उनके समाधान

छवि का एक हिस्सा कट जाता है

छवि की स्थिति अपेक्षित नहीं है

सारांश

YouTube Video

`object-fit` प्रॉपर्टी

`object-fit` की मान

`fill` (डिफ़ॉल्ट मान)

`contain`

`cover`

`none`

`scale-down`

`object-fit` का उपयोग करने वाले हालात

`object-position` प्रॉपर्टी

`object-position` का अवलोकन

`object-fit` के साथ संयोजन

`object-fit` मानों के साथ संयुक्त उदाहरण