خاصية 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 بحيث يبقى الشكل كما هو ولا يتغير عند تغير مساحة الشاشة أو مساحة العرض المتاحة للموقع.

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

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

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

مثال :

div {
  aspect-ratio: 16 / 9; /* نسبة عرض إلى ارتفاع 16:9 */
  width: 100%; /* العرض الكامل للعنصر الأساسي */
}

في المثال السابق سيكون ارتفاع العنصر تلقائيا بنسبة 16:9 بناء على العرض. إذا تغير العرض سواء في ال css أو في تغير حجم الشاشة سيتغير الارتفاع تلقائيا ليحافظ على نفس النسبة.

أما الاساس الذي تختار عليه القيمة فهذا يعتمد عليك وعلى التصميم الذي تريده . فالتصميمات التي تعتمد على شكل مربع يمكنك استخدام aspect-ratio: 1 / 1 لجعل العرض والارتفاع متساويين ، أو يمكنك إستخدام النسب المحددة المستخدمة في الفيديوهات أو الصور وهي 4:3 أو 16:9 . ولكن الأفضل هو معاينة النسبة لديك على التصميم فلكل تصميم نسبة مختلفة عن الآخر حيث يجب عليك إختيار النسبة الأفضل التي تتوافق مع جميع أحجام الشاشة مما يساعد على الحفاظ على تناسق التصميم (Responsive Design).