خصوصية Style objectFit
- الصفحة السابقة minWidth
- الصفحة التالية objectPosition
- العودة إلى الطبقة السابقة مفهوم Style في HTML DOM
التعريف والاستخدام
objectFit تُستخدم الخاصية لتحديد كيفية ضبط حجم <img> أو <video> لتناسب مكونها.
تخبر هذه الخاصية المحتوى عن كيفية تعبئة الماكينة بطرق متعددة؛ مثل "الحفاظ على نسبة الأبعاد" أو "التمدد واستغلال المساحة إلى أقصى حد ممكن".
يرجى الرجوع أيضًا إلى:
دليل CSS:CSS object-fit
دليل CSS:خصوصية object-fit
مثال
قطع الجوانب الجانبية للصورة، الحفاظ على نسبة الأبعاد، وتعبئة المساحة:
document.getElementById("myImg").style.objectFit = "cover";
النحو
استرداد خاصية objectFit:
object.style.objectFit
ضبط خاصية objectFit:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
قيمة الخاصية
| القيمة | وصف |
|---|---|
| fill | افتراضي. ضبط حجم المحتوى المتبديل لتعبئة دائرة المحتوى للعنصر. إذا لزم الأمر، سيتم وسع أو ضغط العنصر. |
| contain | توسيع المحتوى المتبديل للحفاظ على نسبة الأبعاد، مع التطابق مع دائرة المحتوى للعنصر. |
| cover | ضبط حجم المحتوى المتبديل ليعمل على تعبئة دائرة المحتوى بالكامل مع الحفاظ على نسبة الأبعاد. سيتم قطع العنصر. |
| none | المحتوى المتبديل لن يتم ضبط حجمه. |
| scale-down | حجم المحتوى يتطابق مع none أو contain من بينهما، اعتمادًا على أيهما يحصل على حجم العنصر الأصغر. |
| initial | ضبط هذه الخاصية إلى قيمتها الافتراضية. يرجى الرجوع إلى initial. |
| inherit | تنقل هذه الخاصية من عنصر الأب إليها. يرجى الرجوع إلى inherit. |
تفاصيل التقنية
| القيمة الافتراضية: | fill |
|---|---|
| القيمة المعدة: | السلسلة، تعبر عن حجم العنصر خصوصية object-fit. |
| إصدار CSS: | CSS3 |
دعم المتصفح
الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- الصفحة السابقة minWidth
- الصفحة التالية objectPosition
- العودة إلى الطبقة السابقة مفهوم Style في HTML DOM
