شرح صفوف ومحتوى الفقرة
تؤدي كتابة ارتفاع ثابت بالبكسل مثل height: 220px; إلى اختلال تناسب البطاقات المرنة عندما يضيق عرضها على الشاشات الصغيرة. وبدلاً من ذلك، يتيح الجمع بين width: 100%; وخاصية aspect-ratio — مثل 16 / 9 لواجهات الفيديو العريضة أو 4 / 3 للصور التحريرية أو 1 / 1 للبطاقات المربعة — حساب الارتفاع المتناسب تلقائياً في كل عرض.
والأهم هندسياً أن التصريح عن aspect-ratio مع object-fit: cover; يحجز المساحة الدقيقة للصورة فور قراءة الأنماط وقبل اكتمال تنزيل الملف عبر الشبكة، فيمنع قفز النصوص والمحتوى أثناء التحميل.
CSS
.wide-media {
width: 100%;
max-width: 320px;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}