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

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

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

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