1.9 KiB

Raw Blame History

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

1.9 KiB Raw Blame History