object-{position}
موضع القصّ object-{position}
تحدّد أي جزء من الصورة يبقى ظاهرًا عند قصّها بـ object-cover — الأعلى، المركز، زاوية معيّنة.
عندما تقصّ object-cover صورة أعرض أو أطول من صندوقها، لا بدّ من قرار: أيّ جزء يُقصّ وأيّ جزء يبقى؟ هذا بالضبط ما تضبطه object-position. القيمة الافتراضية object-center تُبقي منتصف الصورة، لكن لصور الأشخاص غالبًا object-top أدقّ (يُبقي الوجه)، ولخرائط أو مناظر قد تحتاج object-left أو object-right.
تقبل أيضًا قيمًا مركّبة مثل object-top-left لزاوية محدّدة بدقّة، وقيمًا اعتباطية بين قوسين مربّعين لنسب مئوية دقيقة غير مغطّاة بالقيم الجاهزة.
الصياغة
class="object-cover object-top" /* يُبقي أعلى الصورة */ class="object-cover object-[25%_75%]" /* موضع دقيق */
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
🎨 محرّر HTML/CSS
<script src="https://cdn.tailwindcss.com"></script> <div class="flex gap-4 p-4"> <img class="h-40 w-32 rounded-lg object-cover object-top" src="https://picsum.photos/300/500" /> <img class="h-40 w-32 rounded-lg object-cover object-bottom" src="https://picsum.photos/300/500" /> </div>
النتيجة المباشرة:
أهم القيم
| القيمة | الوظيفة |
|---|---|
| object-center | منتصف الصورة (الافتراضي) |
| object-top / object-bottom | أعلى أو أسفل الصورة |
| object-left / object-right | أقصى اليسار أو اليمين |
| object-top-left ... | زوايا مركّبة |
| object-[x%_y%] | موضع مئوي دقيق مخصّص |
💡 نصائح عملية
- لصور الوجوه أو الأشخاص، object-top غالبًا أدقّ من الافتراضي object-center
- اختبر الموضع فعليًّا مع الصورة الحقيقية — أفضل موضع يختلف حسب تكوين كل صورة
⚠️ أخطاء شائعة
- استخدام object-position بلا object-cover أو object-contain — بلا قصّ فعلي لا تأثير ملحوظ للموضع
- الاعتماد دائمًا على القيمة الافتراضية object-center حتى لو قصّت جزءًا مهمًّا من الصورة
خصائص ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs