خصائص تكيف الكائن في CSS

التعريف والاستخدام

خصائص objectFit تستخدم لتعريف كيفية تعديل حجم <img> أو <video> ليتناسب مع محتوى العنصر.

هذه الخاصية تخبر المحتوى بكيفية ملء العنصر. على سبيل المثال، "حافظ على النسب المئوية" أو "افتح واغزو أكبر مساحة ممكنة".

يرجى الرجوع إلى:

دليل CSSCSS object-fit

دليل CSSCSS object-position

دليل HTML DOMخصائص objectFit

مثال

اقطع الجانبين للصورة، احافظ على النسب المئوية، ثم ملء الفراغات:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

جرب بنفسك

الجملة اللغوية لـ CSS

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

قيمة الخاصية

القيمة الوصف
fill القيمة الافتراضية. تعديل حجم المحتوى المتبديل ليعمل على ملء محتوى العنصر. إذا لزم الأمر، سيتم وسع أو ضغط العنصر.
contain توسيع المحتوى المتبديل للحفاظ على النسب المئوية الثابتة، بينما يتم تعديله ليعمل على ملء محتوى العنصر.
cover تعديل حجم المحتوى المتبديل ليعمل على ملء محتوى العنصر بالكامل بينما يبقى النسب المئوية الثابتة. سيتم قطع العنصر.
none المحتوى المتبديل لن يتم تعديله في الحجم.
scale-down حجم المحتوى متساوي مع none أو contain من بينهما، اعتمادًا على أيهما يوفر حجم العنصر الأصغر.
initial اجعل هذا الخصائص قيمته الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخصائص من العنصر الأم. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية: يرجى الرجوع إلى الخاصيات المنفردة.
الوراثة: لا
صنع المتحرك: غير مدعوم. يرجى الرجوع إلى:خصائص المتحرك.
الإصدار: CSS3
جملة لغوية جافا سكريبت: object.style.objectFit="cover"

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0