خاصية aspect-ratio CSS

تلك الخاصية بحاجة للتبسيط بالفعل، في البداية نستخدمها لتحديد نسبة العرض إلى الارتفاع لعناصر HTML مثل الصور والفيديوهات، أي تُحدد شكل العنصر بغض النظر عن حجمه الفعلي.

.image {
  width: 300px;
  aspect-ratio: 16 / 9; 
}

لاحظ هنا ستكون صورة image بعرض 300 بكسل، وسيتم ضبط ارتفاعها تلقائيًا للحفاظ على نسبة عرض إلى ارتفاع 16:9 (مثل شاشة التلفزيون).

القيمة الأولى 16 هي العرض والثانية 9 هي الإرتفاع.

ونسبة العرض إلى الارتفاع 16:9 هي نسبة شائعة جدًا في شاشات التلفزيون وأجهزة الكمبيوتر المحمولة ذات الشاشات العريضة، وتعني أن عرض العنصر يساوي 16 وحدة، بينما ارتفاعه يساوي 9 وحدات وسيظهر بشكل مستطيل.

أي لو عرض عنصر HTML هو 320 بكسل، ونسبة العرض إلى الارتفاع هي 16:9، فإن ارتفاعه سيكون 180 بكسل

 (320 / 16) * 9 = 180

بينما شاشات التلفاز أو أجهزة الكمبيوتر العادية لها أبعاد

aspect-ratio: 4/3;

أو مثلا نريد إرتفاع ضعف العرض سنكتب:

  aspect-ratio: 1 / 2;

ما الحاجة إليها؟

ببساطة للحفاظ على شكل العناصر كما نريدها عندما تتغير أحجام الشاشات أو المساحة المخصصة للعرض، أي في التصميمات المتجاوبة Responsive Design بحيث يبقى الشكل كما هو ولا يتغير عند تغير مساحة الشاشة أو مساحة العرض المتاحة للموقع.

تفقد المثال التالي وعدل بالقيمة وستتفهم الأمر:

الأداة التالية ستوفر عليك الكثير: