شرح صفوف ومحتوى الفقرة
تعمل القيمة object-fit: cover; على تكبير أو تصغير الصورة والفيديو مع الحفاظ الصارم على النسبة الهندسية الأصلية حتى يغطي الوسيط كامل عرض الصندوق وارتفاعه معاً دون ترك أي فراغات جانبية، مع قص الأطراف الزائدة التي تتجاوز حدود الإطار تلقائياً.
لذلك تُعد القيمة cover الخيار القياسي لصور بطاقات المقالات والصور الرمزية ولافتات الواجهات ومعارض الصور الموحدة التي يرفع فيها المستخدمون ملفات بأحجام متباينة.
CSS
.card-photo {
width: 280px;
height: 160px;
object-fit: cover;
border-radius: 10px;
border: 2px solid #7750b2;
}