صور تملأ صناديقها

الصور لا تأتي بمقاس واحد: طولية وعرضية ومربّعة. وإن تركت كلًّا بنسبته خرجت البطاقات المتجاورة بارتفاعات متفاوتة وانكسر الصفّ.

خاصيتان تحلّان ذلك: aspect-ratio: 16 / 9 تفرض على الصندوق نسبته أيًّا كان عرضه، وobject-fit: cover تملؤه بالصورة وتقصّ الزائد من أطرافها. والفخّ أن تثبّت height بدلهما: يستوي الصندوق، لكن القيمة الافتراضية fill تمطّ الصورة فتصير الدائرة بيضاوية، ويختلّ الارتفاع الثابت مع أول تغيّر في العرض.

وبقيت الحواف: البطاقة مستديرة والصورة حادّة الزوايا فتبرز فوق الإطار. overflow: hidden على البطاقة يقصّ كل ما يخرج عن حدودها.