object-fit: كيف تختار بين قص الصورة وترك فراغ حولها؟

الخلاصة السريعة

ما الذي يتغير بين القيم الثلاث؟

تحافظ contain وcover على نسبة الصورة؛ أما fill فتملأ الصندوق بتغيير النسبة عند الحاجة، ولذلك قد تتحول الدائرة إلى شكل بيضاوي. [1]

اختر contain حين تكون الأطراف جزءًا من المعلومة، مثل مخطط يجب أن يظهر كاملًا. واختر cover حين تكون أولوية التصميم ملء مساحة محددة ويمكن الاستغناء عن الأطراف. أما fill فتعرض جميع المحتويات داخل المساحة، لكن ملامحها قد تتمدد في اتجاه أكثر من الآخر. [1]

احسب التحجيم قبل الحكم على القص

لصورة نقطية أبعادها 600×300 داخل صندوق محتوى 240×240، تعطي contain محتوى 240×120، وتعطي cover محتوى 480×240؛ مع التوسيط يبقى فراغ 60 أعلى وأسفل في الأولى، ويُقص 120 من كل جانب من المحتوى المكبّر في الثانية. [3]

النسبتان اللازمتان للوصول إلى الإطار هما 240÷600=0.4 و240÷300=0.8. تأخذ contain الأصغر لتسع الصندوق، وتأخذ cover الأكبر لتغطيه. الأرقام المقصوصة تخص حجم العرض بعد التحجيم؛ لا تعني حذف بكسلات من الملف. وفي fill يصبح المحتوى 240×240: العامل الأفقي 0.4 والعمودي 0.8. هذه الحسابات تخص صورتنا ذات النسبة المعروفة والأبعاد الموجبة. [3]

غيّر موضع القص حين تحتاج إلى طرف معين

تحدد object-position موضع المحتوى داخل الصندوق؛ القيمة الابتدائية 50% 50% توسّطه، بينما left top تحاذي حافتيه اليسرى والعليا. [2]

بعد تنفيذ المقارنة الأساسية، أضف السطر التالي إلى تنسيقها لتجربة object-position: left top مع cover؛ يبقى الطرف الأيسر ظاهرًا ويتركز القص في الطرف الأيمن. لم يتغير حجم الصندوق، وإنما تحرك المحتوى بالنسبة إليه. أعد قيمة القاعدة إلى center لاسترجاع التوسيط، وقارن العلامة القريبة من الحافة. إذا كانت الصورة كاملة داخل الإطار، فقد يظهر أثر المحاذاة في توزيع الفراغ بدل اختفاء التفاصيل. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

.cover { object-position: left top; }

تجربة قصيرة بصورة واحدة

طبّق object-fit على img وحدد أبعاد عنصر الصورة نفسه؛ في تجربتنا نثبتها عند 240px لكل اتجاه، ونقارن الملف نفسه دون حشو أو حدود داخل القياس. [4]

اختر ملفًا بنسبة عرض إلى ارتفاع 2:1 وسمّه sample.png، ثم استخدمه في ثلاثة عناصر img لها الفئات contain وcover وfill. غيّر قيمة واحدة في كل نسخة كما في الشيفرة. قارن ظهور الحواف وشكل دائرة أو مربع داخل الصورة؛ لا تكتفِ بقياس إطار العنصر لأن الأطر الثلاثة متساوية هنا. [4]

مرّر الشيفرة أفقيًا عند الحاجة.

img {
  display: block;
  width: 240px;
  height: 240px;
  padding: 0;
  border: 0;
  background: #dce7e4;
  object-position: center;
}
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.fill { object-fit: fill; }