ملائمة الكائن (Object fit)

كيف يعمل ؟

قم بتغيير قيمة خاصية object-fit باستخدام فئات (classes) الـ object-fit المتوافقة مع الشاشات (Responsive). تخبر هذه الخاصية المحتوى بملء الحاوية الأصلية بطرق متنوعة، مثل الحفاظ على نسبة العرض إلى الارتفاع أو التمدد ليشغل أكبر مساحة ممكنة.

تسمى الفئات (classes) الخاصة بقيمة object-fit باستخدام التنسيق .object-fit-{value}. اختر من القيم التالية:

• contain
• cover
• fill
• scale (لـ scale-down)
• none

أمثلة

Add the object-fit-{value} class to the replaced element:

html

<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">

المتوافق مع الشاشات (Responsive)

توجد أيضاً متغيرات متوافقة مع الشاشات (Responsive) لكل قيمة object-fit باستخدام التنسيق .object-fit-{breakpoint}-{value}، لاختصارات نقاط التوقف (breakpoints) التالية: sm، md، lg، xl، و xxl. يمكن دمج الفئات (classes) لتحقيق تأثيرات متنوعة حسب حاجتك.

html

<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">

الفيديو (Video)

تعمل أدوات .object-fit-{value} وأدوات .object-fit-{breakpoint}-{value} المتوافقة مع الشاشات أيضاً على عناصر <video>.

<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>

الـ (CSS)

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

تم التصريح عن أدوات ملائمة الكائن (Object fit) في واجهة برمجة تطبيقات الأدوات (utilities API) الخاصة بنا في scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات الأدوات (utilities API).

"object-fit": (
  responsive: true,
  property: object-fit,
  values: (
    contain: contain,
    cover: cover,
    fill: fill,
    scale: scale-down,
    none: none,
  )
),