خصائص `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`

تُستخدم خاصية object-fit في CSS بشكل أساسي للتحكم في كيفية تناسب الصور ومقاطع الفيديو والمحتويات الأخرى داخل عناصر الحاوية الخاصة بها۔ باستخدام هذه الخاصية، يمكنك تحديد كيفية تغيير حجم العناصر الموضحة ووضعها بشكل جمالي بشكل مرن۔ إنها مفيدة للغاية في ضبط عرض الصور أو مقاطع الفيديو عن طريق القص أو التحجيم عندما لا تتناسب مع عنصر الوالد۔

قيم `object-fit`

`fill` (القيمة الافتراضية)

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

fill هي القيمة الافتراضية، حيث يتم تمديد الصور أو مقاطع الفيديو قسرًا لتناسب تمامًا عرض وارتفاع عنصر الوالد۔ في هذه الحالة، يتم تجاهل نسبة العرض إلى الارتفاع الأصلية، مما قد يتسبب في تشوه الصورة۔

يتناسب تمامًا مع حجم عنصر الوالد۔
نظرًا لأنه يتم تجاهل نسبة العرض إلى الارتفاع، قد يتم تمديد الصور أو مقاطع الفيديو عموديًا أو أفقيًا۔

`contain`

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

contain يعيد تغيير حجم المحتوى بحيث يتناسب تمامًا ضمن عنصر الوالد مع الحفاظ على نسبة العرض والارتفاع۔ إنه لا يتجاوز حجم عنصر الوالد، وقد يكون هناك حشو على الجانب العمودي أو الأفقي۔

يتم عرض المحتوى بالكامل۔
للحفاظ على نسبة العرض والارتفاع الأصلية، قد يظهر حشو (تأثير letterbox أو pillarbox)۔

`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 هي خاصية لتعديل المحتوى ليتناسب مع العنصر الأبوي، لذلك إذا لم يكن حجم العنصر الأبوي واضحًا، لن يتم تحقيق التأثير المتوقع۔ تأكد من أن العنصر الأبوي لديه 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: 150px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

في هذه الحالة، تحتاج إلى تحديد ارتفاع العنصر الأبوي أو تعديل التخطيط بالكامل باستخدام flexbox أو grid layout۔

الحالات التي يُفضل فيها استخدام `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;، يتم وضع العنصر على بعد 50 بكسل من اليسار ويتم توسيطه عموديًا.۔

تحديد قيمتين

تحديد قيمتين يتيح لك ضبط المواقع الأفقية (محور X) والعمودية (محور Y) بشكل منفصل.۔

عند تحديدها كـ object-position: center center;، يتم توسيط العنصر.۔
عند تحديدها كـ object-position: right top;، يتم وضع العنصر في الزاوية العلوية اليمنى.۔
عند تحديدها كـ object-position: 75% 20%;، يتم وضع العنصر بنسبة 75% أفقيًا و20% عموديًا.۔
عند تحديدها كـ object-position: 50px 25px;، يتم وضع العنصر على بعد 50 بكسل من اليسار و25 بكسل من الأعلى.۔

تحديد أربع قيم

عند تحديد أربع قيم، يمكنك توفير تحديد أكثر تفصيلاً للموقع باستخدام كلمات مفتاحية مثل left أو top مع القيم المزاحة الخاصة بها.۔

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

عند تحديدها كـ object-position: left 10px top 20px;، يتم وضع العنصر على بعد 10 بكسل من اليسار و20 بكسل من الأعلى.۔
عند تحديدها كـ object-position: right 15% bottom 30px;، يتم وضع العنصر على بعد 15% من اليمين و30 بكسل من الأسفل.۔

صيغة تحديد القيم

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، يمكن تحقيق تخطيطات مرنة تتماشى مع التصميم۔ تعلم الكلمات المفتاحية، النسب المئوية، ووحدات الطول لتحقيق أقصى تأثيرات بصرية في مختلف الحالات۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على 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`