41 lines
1.9 KiB
Markdown
41 lines
1.9 KiB
Markdown
---
|
|
title: Object Fit
|
|
localeTitle: كائن صالح
|
|
---
|
|
# كائن صالح
|
|
|
|
تحدد خاصية `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 |