1.9 KiB
title | localeTitle |
---|---|
Object Fit | كائن صالح |
كائن صالح
تحدد خاصية object-fit
العناصر كيف يستجيب عنصر إلى عرض / ارتفاع مربع الأصل.
يمكن استخدام هذه الخاصية للصورة أو الفيديو أو أي وسائط أخرى. ويمكن أيضًا استخدامه مع خاصية object-position
للحصول على مزيد من التحكم في كيفية عرض الوسائط.
بشكل أساسي ، نستخدم خاصية object-fit
لتحديد كيفية امتدادها أو إسحقها في وسط وسائط مضمنة.
بناء الجملة
.element { object-fit: fill || contain || cover || none || scale-down; }
القيم
-
fill
: هذه هي القيمة الافتراضية . قم بتغيير حجم المحتوى ليطابق مربعه الأصلي بغض النظر عن نسبة العرض إلى الارتفاع. -
contain
: تغيير حجم المحتوى لتعبئة المربع الأصل باستخدام نسبة العرض إلى الارتفاع الصحيحة. -
cover
: مماثلcontain
ولكن غالبًا ما يحصد المحتوى. -
none
: قم بعرض الصورة بحجمها الأصلي. -
scale-down
: قارن الفرق بينnone
contain
للعثور على أصغر حجم كائن ملموس.
التوافق المتصفح
يتم دعم object-fit
قبل معظم المتصفحات الحديثة ، للحصول على أحدث المعلومات حول التوافق ، يمكنك التحقق من ذلك http://caniuse.com/#search=object-fit
أيضا هناك polyfill للمتصفح غير معتمد (في الغالب IE). https://github.com/anselmh/object-fit
معلومات اكثر
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://drafts.csswg.org/css-images-3/#the-object-fit