ماهو aspect-ratio

الـ aspect-ratio في CSS هو خاصية تُستخدم لتحديد نسبة العرض إلى الارتفاع لعنصر معيّن.
كم يكون عرض العنصر بالنسبة لارتفاعه.

aspect-ratio: 16 / 9;

العرض يكون 16 وحدة مقابل 9 وحدات ارتفاع (شاشات الفيديو).

تفيد هذه الخاصية في الحفاظ على تناسق الأبعاد مهما تغيّر حجم العنصر.

إن خاصية aspect-ratio في CSS تستخدم لتحديد نسبة العرض إلى الارتفاع لعنصر ما وهو ما يساعد في الحفاظ على أبعاده بشكل متناسق عند تغيير حجم الشاشة أو عندما لا يتم تحديد العرض والارتفاع صراحة.

فمثلا في الصور هناك الصورة 3:4  هنا يعني أى العرض هو 3 والطول هو 4 . أى أن الطول سيكون أكبر من العرض .فمثلا أنت لا تعرف ما هو قيمة الطول والعرض الأصلية للصورة أو للعنصر . ولكنك تخبر css أن تحافظ على تلك النسبة أى أن قسمة العرض على الطول يجب أن تكون 3:4 .

img {
  aspect-ratio: 1 / 1;
  width: 100px;
  object-fit: cover;
}

فمثلا في المثال السابق نحن وضعنا النسبة 1 إلى 1 أى أننا نريد صورة الطول والعرض الخاص بها متساويين أى نريد صورة مربعة.

وهكذا يمكنك وضع النسبة بناء على ما تريده فلو أردت الطول أكبر من العرض تعطي نسبة أكبر للطول وهكذا فأنت لست مجبرا على معرفة قيمة ال px للصورة .

عموماً بشكل مبسط تخيل أن لديك مستطيل أو مربع، وتريد أن تحافظ على شكله النسبي حتى لو تغير حجمه. هذا بالضبط ما تفعله aspect-ratio - فهي تحدد العلاقة الثابتة بين العرض والارتفاع.

مثال على ذلك 

.square {
    aspect-ratio: 1 / 1; /* أو يمكنك كتابة 1 فقط */
    width: 200px;
    /* الارتفاع سيصبح 200px تلقائياً */
}