ملاءمة أبعاد الصور والفيديو في لغة CSSCSS Object Fit

تأتي كل صورة أو مقطع فيديو بنسبة أبعاد أصلية تحددها أبعاد الملف الطبيعية بالبكسل. عندما تفرض على عنصر <img> أو <video> قيمتين ثابتتين لخاصيتي width و height لا تطابقان نسبة الملف الأصلية، يعمد المتصفح افتراضياً إلى مط الصورة أو ضغطها لملء الصندوق قسراً؛ فتظهر الصور العريضة مضغوطة أفقياً داخل البطاقات المربعة وتبدو اللقطات الطولية مسطحة ومشوهة داخل اللافتات العريضة.

تعالج خاصية object-fit هذه المشكلة جذرياً عبر فصل أبعاد صندوق العنصر في التخطيط عن طريقة تحجيم وقص محتوى الوسائط المرسوم بداخله.

تعمل القيمة object-fit: cover; على تكبير أو تصغير الصورة والفيديو مع الحفاظ الصارم على النسبة الهندسية الأصلية حتى يغطي الوسيط كامل عرض الصندوق وارتفاعه معاً دون ترك أي فراغات جانبية، مع قص الأطراف الزائدة التي تتجاوز حدود الإطار تلقائياً.

لذلك تُعد القيمة cover الخيار القياسي لصور بطاقات المقالات والصور الرمزية ولافتات الواجهات ومعارض الصور الموحدة التي يرفع فيها المستخدمون ملفات بأحجام متباينة.

عندما يكون قص أي جزء من الصورة غير مقبول إطلاقاً — كما في شعارات الشركات والرسوم الهندسية والشهادات وصور المنتجات الكاملة في المتاجر — نستخدم القيمة object-fit: contain;؛ إذ يحجّم المتصفح الوسيط بالتناسب حتى يلامس بُعده الأكبر حافة الصندوق الداخلية مع إبقاء كامل تفاصيل الصورة ظاهرة دون اقتطاع.

ولأن نسبة الصورة قد تختلف عن نسبة الصندوق، تظهر مساحات فارغة أعلى الصورة وأسفلها أو على جانبيها؛ وهنا يمنح تنسيق العنصر بخلفية هادئة عبر background-color مع حشوة padding إطاراً أنيقاً ومتوازناً.

إلى جانب القيمتين cover و contain، توفر خاصية object-fit ثلاث قيم إضافية تعالج حالات تحجيم دقيقة:

• القيمة fill — هي الوضع الافتراضي الأولي في المتصفح، وتمط الوسيط أفقياً وعمودياً لملء الصندوق متجاهلة نسبة أبعاده الأصلية.
• القيمة none — تعرض الصورة بأبعادها الحقيقية بالبكسل دون أي تكبير أو تصغير، مع قص الأجزاء الزائدة إن كان الصندوق أصغر منها.
• القيمة scale-down — تقارن تلقائياً بين نتيجتي none و contain وتطبق الأصغر حجماً بينهما؛ ما يمنع تكبير الأيقونات الصغيرة وتشوشها داخل الصناديق الكبيرة مع تصغير الصور الضخمة بأمان.

يوسّط المتصفح الوسائط أفقياً وعمودياً افتراضياً داخل الإطار وفق القيمة object-position: 50% 50%;. وعندما تقتطع القيمة object-fit: cover; صورة طولية داخل لافتة قصيرة الارتفاع، قد يؤدي التوسيط الآلي إلى قص الجزء العلوي الأهم من المشهد.

تمنحك خاصية object-position تحكماً دقيقاً في بؤرة التركيز البصري عبر الكلمات الاتجاهية مثل top و bottom و left و right أو عبر النسب المئوية مثل 50% 20% لإبقاء العنصر الرئيسي ظاهراً بوضوح داخل البطاقة.

تؤدي كتابة ارتفاع ثابت بالبكسل مثل height: 220px; إلى اختلال تناسب البطاقات المرنة عندما يضيق عرضها على الشاشات الصغيرة. وبدلاً من ذلك، يتيح الجمع بين width: 100%; وخاصية aspect-ratio — مثل 16 / 9 لواجهات الفيديو العريضة أو 4 / 3 للصور التحريرية أو 1 / 1 للبطاقات المربعة — حساب الارتفاع المتناسب تلقائياً في كل عرض.

والأهم هندسياً أن التصريح عن aspect-ratio مع object-fit: cover; يحجز المساحة الدقيقة للصورة فور قراءة الأنماط وقبل اكتمال تنزيل الملف عبر الشبكة، فيمنع قفز النصوص والمحتوى أثناء التحميل.

قبل الانتشار الشامل لخاصية object-fit، اعتاد كثيرون استبدال وسم <img> الدلالي بصناديق <div> فارغة منسقة عبر background-image و background-size: cover; لمجرد الحصول على قص متناسق. أما هندسياً اليوم، فيجب إبقاء كل صورة ذات معنى داخل وسم <img> مع object-fit للحفاظ على النص البديل وأرشفة محركات البحث، وقصر الخلفيات على الزخارف البحتة.