CSS - object-fit الخاصية

CSS - الخاصية object-fit

🔸 تُستخدم خاصية object-fit لتحديد كيفية ملاءمة محتوى مثل الصور أو الفيديوهات داخل العنصر الحاوي له (container)، خاصة عند استخدام width وheight ثابتين.

🧪 مثال بسيط: صورة داخل إطار

<img src="img.jpg" style="width: 300px; height: 200px; object-fit: cover;">

📌 هذا الكود يحدد صورة بمقاس ثابت، وتُضبط باستخدام object-fit للحفاظ على المظهر.

---

🔹 القيم المتاحة لـ object-fit

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

---

🧪 أمثلة على كل قيمة

img.fill {
  object-fit: fill;
}

img.contain {
  object-fit: contain;
}

img.cover {
  object-fit: cover;
}

img.none {
  object-fit: none;
}

img.scale-down {
  object-fit: scale-down;
}

<img src="img.jpg" class="cover" style="width:300px; height:200px;">

---

📌 ملاحظات هامة

• الخاصية object-fit تعمل مع العناصر من نوع <img> و<video> فقط.
• تُستخدم بكثرة في تصميم المعارض (galleries) أو الصور الشخصية التي يجب أن تبقى متناسقة.
• لأفضل نتائج، استخدم معها width وheight ثابتين.