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

متعلق بتناسب الكائنات

خاصية `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: 500px; 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-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}

في هذا المثال، الصورة موضوعة عند الحافة اليمنى، ومركزة عموديًا عند 50%۔ هذا المزيج مفيد جدًا عندما تكون هناك حاجة لتحديد الوضعية بمرونة۔

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

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص `overflow` و `contain`

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