خاصية object-fit في CSS تُستخدم لتحديد كيف يجب أن يتم تغيير حجم عنصر مُستبدَل (replaced element)، مثل <image> أو <video>، ليناسب المساحة المُخصصة له. ببساطة، تُحدد هذه الخاصية كيف ستظهر الصورة أو الفيديو داخل الصندوق الذي يحتويه، سواء بالحفاظ على نسبة العرض إلى الارتفاع الأصلية أو بتمديدها أو قصها.

القيم المُتاحة لخاصية object-fit:

  • fill (القيمة الافتراضية): يتم تمديد العنصر ليملأ الصندوق بالكامل، بغض النظر عن نسبة العرض إلى الارتفاع الأصلية. قد يؤدي ذلك إلى تشويه الصورة أو الفيديو.
  • contain: يتم تغيير حجم العنصر ليناسب الصندوق مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية. سيظهر العنصر بالكامل داخل الصندوق، وقد يظهر بعض المساحات الفارغة (تُسمى "letterboxing" أو "pillarboxing") إذا كانت نسبة العرض إلى الارتفاع للعنصر مختلفة عن نسبة العرض إلى الارتفاع للصندوق.
  • cover: يتم تغيير حجم العنصر ليغطي الصندوق بالكامل مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية. سيتم قص بعض أجزاء العنصر إذا كانت نسبة العرض إلى الارتفاع للعنصر مختلفة عن نسبة العرض إلى الارتفاع للصندوق.
  • none: لا يتم تغيير حجم العنصر. سيتم عرض العنصر بحجمه الأصلي. إذا كان حجم العنصر أكبر من الصندوق، سيتم قص بعض أجزائه.
  • scale-down: يتم تغيير حجم العنصر بنفس طريقة contain إذا كان حجم العنصر أكبر من الصندوق، وبنفس طريقة none إذا كان حجم العنصر أصغر من الصندوق.

شرح مُفصل مع أمثلة:

لنفترض أن لدينا صندوقًا بأبعاد 300 بكسل عرضًا و 200 بكسل ارتفاعًا، وصورة بأبعاد 600 بكسل عرضًا و 400 بكسل ارتفاعًا (نسبة العرض إلى الارتفاع 3:2).

  • object-fit: fill;: سيتم تمديد الصورة لتصبح 300 بكسل عرضًا و 200 بكسل ارتفاعًا، مما سيؤدي إلى تشويهها.
  • object-fit: contain;: سيتم تغيير حجم الصورة لتصبح 300 بكسل عرضًا و 200 بكسل ارتفاعًا. سيتم احتواء الصورة بالكامل داخل الصندوق، وستظهر مساحات فارغة أعلى وأسفل الصورة لأن نسبة العرض إلى الارتفاع للصندوق (3:2) تطابق نسبة العرض إلى الارتفاع للصورة.
  • object-fit: cover;: سيتم تغيير حجم الصورة لتصبح 400 بكسل عرضًا و 266.67 بكسل ارتفاعًا. سيتم قص جزء من الصورة من الأعلى والأسفل ليناسب الصندوق تمامًا.
  • object-fit: none;: سيتم عرض الصورة بحجمها الأصلي (600 بكسل عرضًا و 400 بكسل ارتفاعًا)، وسيتم قص جزء كبير منها لأنها أكبر من الصندوق.
  • object-fit: scale-down;: سيتم تغيير حجم الصورة بنفس طريقة contain لتصبح 300 بكسل عرضًا و 200 بكسل ارتفاعًا.

مثال كود HTML و CSS:

HTML
<div class="container">
  <img src="image.jpg" alt="Image">
</div>
CSS
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* أو أي قيمة أخرى حسب الحاجة */
}

في هذا المثال، يتم وضع الصورة داخل صندوق بأبعاد مُحددة، ويتم استخدام object-fit: cover; لضمان أن الصورة تغطي الصندوق بالكامل مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية.

خاصية object-position:

بالإضافة إلى object-fit، تُستخدم خاصية object-position لتحديد موضع العنصر داخل الصندوق عند استخدام object-fit: contain; أو object-fit: cover;. القيم المُتاحة تشبه القيم المُستخدمة في خاصية background-position، مثل top، bottom، left، right، center، وقيم رقمية بوحدات البكسل أو النسب المئوية.

مثال:

CSS
img {
  object-fit: cover;
  object-position: top left; /* وضع الصورة في أعلى اليسار */
}

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