شرح صفوف ومحتوى الفقرة
يوسّط المتصفح الوسائط أفقياً وعمودياً افتراضياً داخل الإطار وفق القيمة object-position: 50% 50%;. وعندما تقتطع القيمة object-fit: cover; صورة طولية داخل لافتة قصيرة الارتفاع، قد يؤدي التوسيط الآلي إلى قص الجزء العلوي الأهم من المشهد.
تمنحك خاصية object-position تحكماً دقيقاً في بؤرة التركيز البصري عبر الكلمات الاتجاهية مثل top و bottom و left و right أو عبر النسب المئوية مثل 50% 20% لإبقاء العنصر الرئيسي ظاهراً بوضوح داخل البطاقة.
CSS
.banner-top {
width: 300px;
height: 120px;
object-fit: cover;
object-position: 50% 15%;
border-radius: 8px;
}