صفة CSS object-fit
- الصفحة السابقة CSS أنماط الصور
- الصفحة التالية CSS object-position
CSS object-fit تُستخدم الصفة لتحديد كيفية تعديل حجم <img> أو <video> لتناسب حاويته.
دعم المتصفح
أرقام الجدول تشير إلى إصدار المتصفح الأول الذي يدعم هذه الصفة بالكامل.
| الصفة | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
صفة CSS object-fit
CSS object-fit تُستخدم الصفة لتحديد كيفية تعديل حجم <img> أو <video> لتناسب حاويته.
تخبر هذه الصفة المحتوى بكيفية ملء الحاوية بطرق مختلفة. مثل 'الحفاظ على نسبة العرض والارتفاع' أو 'التمدد والاستيلاء على أكبر قدر ممكن من المساحة'.
انظر إلى صورة الزهور من مزارع الزهور في شنغهاي، وهي 300x300 بكسل:
لكن، إذا قمنا بتعيين الصورة إلى 200x300 بكسل، فإنها ستكون تبدو هكذا:
مثال
img {
width: 200px;
height: 300px;
}
سنرى أن الصورة قد تم ضغطها لتتناسب مع حاوية 200x300 بكسل، وتم تدمير النسبة الأصلية للعرض والارتفاع.
إذا استخدمنا object-fit: cover;، وسيفصل الجانبين للصورة، وسيحافظ على نسبة العرض والارتفاع ويملأ المساحة كما يلي:
مثال
img {
width: 200px;
height: 400px;
object-fit: cover;
}
مثال آخر
في هذا المثال، لدينا صورتين نريد أن تشغل 50٪ من عرض المتصفح و100٪ من الارتفاع.
في المثال التالي، لا نستخدم object-fitلذلك، عند تعديل حجم نافذة المتصفح، سيتم تدمير نسبة العرض والارتفاع للصورة:
مثال
في المثال التالي، نستخدم object-fit: cover;لذلك، عند تعديل حجم نافذة المتصفح، سيتم الحفاظ على نسبة العرض والارتفاع للصورة:
مثال
جميع قيم خاصية CSS object-fit
object-fit يمكن للصفة قبول القيم التالية:
fill- القيمة الافتراضية. تعديل حجم المحتوى المُستبدل لملء وحدة المحتوى. إذا لزم الأمر، يتم تقسيم أو تقليص الكائن للاطلاق.contain- تضخيم المحتوى المُستبدل للحفاظ على نسبة العرض والارتفاع، وإدخاله إلى وحدة المحتوى.cover- تعديل حجم المحتوى المُستبدل لتحقيق مقياس العرض والارتفاع عند ملء كامل وحدة المحتوى. سيتم قطع هذا الكائن للاطلاق.none- لا يتم تغيير حجم المحتوى البديل.scale-down- تغيير حجم المحتوى كما لو لم يتم تحديد المحتوى أو تم تحديد المحتوى (سيؤدي إلى حجم محدد أصغر للمكونات المحددة)
في هذا المثال، يتم عرض object-fit كل القيم المحتملة للخصائص:
مثال
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- الصفحة السابقة CSS أنماط الصور
- الصفحة التالية CSS object-position
