قصّ ومطابقة الصور object-*

الصياغة

class="h-48 w-96 object-cover"      /* يملأ ويقصّ */
class="h-48 w-96 object-contain"    /* يعرض كاملة بلا قصّ */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex gap-4 p-4">
  <img class="h-40 w-40 rounded-lg object-cover" src="https://picsum.photos/300/200" />
  <img class="h-40 w-40 rounded-lg bg-gray-100 object-contain" src="https://picsum.photos/300/200" />
</div>

أهم القيم

💡 نصائح عملية

• ادمج object-cover مع aspect-* على أي صورة بعرض متجاوب لضمان نسبة ثابتة بلا تشويه
• استخدم object-{position} (مثل object-top) مع object-cover لاختيار الجزء المرئي من الصورة عند القصّ

⚠️ أخطاء شائعة

• استخدام object-fill على صور بورتريه أو أشخاص — يشوّه الوجوه بشكل ملحوظ
• نسيان تحديد ارتفاع وعرض للصورة — object-fit بلا صندوق محدّد الأبعاد لا يغيّر شيئًا

خصائص ذات صلة