CSS - object-fit الخاصية
CSS - الخاصية object-fit
🔸 تُستخدم خاصية object-fit لتحديد كيفية ملاءمة محتوى مثل الصور أو الفيديوهات داخل العنصر الحاوي له (container)، خاصة عند استخدام width وheight ثابتين.
🧪 مثال بسيط: صورة داخل إطار
<img src="img.jpg" style="width: 300px; height: 200px; object-fit: cover;">
📌 هذا الكود يحدد صورة بمقاس ثابت، وتُضبط باستخدام object-fit للحفاظ على المظهر.
🔹 القيم المتاحة لـ object-fit
fill(الافتراضي): تمدد المحتوى لملء الإطار بالكامل حتى لو أدى إلى تشويه.contain: يضبط المحتوى ليتناسب مع الإطار مع الحفاظ على الأبعاد الأصلية (قد يترك فراغ).cover: يملأ الإطار بالكامل مع الحفاظ على النسبة، وقد يتم اقتصاص جزء.none: يعرض المحتوى بأبعاده الأصلية بدون ضبط.scale-down: مثلnoneأوcontain، أيهما أصغر.
🧪 أمثلة على كل قيمة
img.fill {
object-fit: fill;
}
img.contain {
object-fit: contain;
}
img.cover {
object-fit: cover;
}
img.none {
object-fit: none;
}
img.scale-down {
object-fit: scale-down;
}
<img src="img.jpg" class="cover" style="width:300px; height:200px;">
📌 ملاحظات هامة
- الخاصية
object-fitتعمل مع العناصر من نوع<img>و<video>فقط. - تُستخدم بكثرة في تصميم المعارض (galleries) أو الصور الشخصية التي يجب أن تبقى متناسقة.
- لأفضل نتائج، استخدم معها
widthوheightثابتين.
تعليقات
إرسال تعليق