CSS خاصية تناسب الكائن
تُستخدم خاصية CSS object-fitلتحديد كيفية تغيير حجم <img> أو <video> ليناسب الحاوية الخاصة به.
خاصية تناسب الكائن في CSS
تُستخدم خاصية CSS object-fitلتحديد كيفية تغيير حجم <img> أو <video> ليناسب الحاوية الخاصة به.
تخبر هذه الخاصية المحتوى بملء الحاوية بعدة طرق ؛ مثل "الحفاظ على نسبة العرض إلى الارتفاع" أو "التمدد وشغل أكبر مساحة ممكنة".
انظر إلى الصورة التالية من باريس. هذه الصورة بعرض 400 بكسل وارتفاع 300 بكسل:
ومع ذلك ، إذا قمنا بتصميم الصورة أعلاه بحيث تكون نصف عرضها (200 بكسل) ونفس الارتفاع (300 بكسل) ، فستبدو كما يلي:
مثال
img {
width: 200px;
height:
300px;
}
نرى أنه يتم ضغط الصورة لتلائم حاوية تبلغ 200 × 300 بكسل (يتم إتلاف نسبة العرض إلى الارتفاع الأصلية).
هنا object-fitيأتي دور الخاصية. object-fitيمكن أن تأخذ الخاصية إحدى القيم التالية:
fill- هذا هو الافتراضي. يتم تغيير حجم الصورة لملء البعد المحدد. إذا لزم الأمر ، سيتم شد الصورة أو ضغطها لتناسبcontain- تحافظ الصورة على نسبة العرض إلى الارتفاع ، ولكن يتم تغيير حجمها لتلائم البعد المحددcover- تحافظ الصورة على نسبة العرض إلى الارتفاع وتملأ البعد المحدد. سيتم قص الصورة لتناسبnone- لم يتم تغيير حجم الصورةscale-down- تم تصغير الصورة إلى أصغر إصدار منnoneأوcontain
باستخدام ملاءمة الكائن: غطاء ؛
إذا استخدمنا object-fit: cover;الصورة تحافظ على نسبة العرض إلى الارتفاع وتملأ البعد المحدد. سيتم قص الصورة لتلائم:
مثال
img {
width: 200px;
height:
300px;
object-fit: cover;
}
استخدام ملاءمة الكائن: يحتوي ؛
إذا استخدمنا object-fit: contain;الصورة تحافظ على نسبة العرض إلى الارتفاع ، ولكن يتم تغيير حجمها لتلائم البعد المحدد:
مثال
img {
width: 200px;
height:
300px;
object-fit: contain;
}
استخدام ملاءمة الكائن: ملء ؛
إذا استخدمنا object-fit: fill;الصورة يتم تغيير حجمها لملء البعد المحدد. إذا لزم الأمر ، سيتم شد الصورة أو ضغطها لتناسب:
مثال
img {
width: 200px;
height:
300px;
object-fit: fill;
}
استخدام ملاءمة الكائن: لا شيء ؛
إذا استخدمنا object-fit: none;الصورة لم يتم تغيير حجمها:
مثال
img {
width: 200px;
height:
300px;
object-fit: none;
}
استخدام ملاءمة الكائن: تصغير الحجم ؛
إذا استخدمنا object-fit: scale-down;الصورة يتم تصغيرها إلى أصغر إصدار من noneأو
contain:
مثال
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
مثال آخر
لدينا هنا صورتان ونريدهما أن يملأوا عرض 50٪ من نافذة المتصفح و 100٪ من الارتفاع.
في المثال التالي لا نستخدمه object-fit، لذلك عندما نقوم بتغيير حجم نافذة المتصفح ، سيتم إتلاف نسبة العرض إلى الارتفاع للصور:
مثال
في المثال التالي ، نستخدم object-fit: cover;، لذلك عندما نغير حجم نافذة المتصفح ، يتم الاحتفاظ بنسبة العرض إلى الارتفاع للصور:
مثال
CSS object-fit المزيد من الأمثلة
يوضح المثال التالي جميع القيم الممكنة 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 - خصائص *:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |