خاصية aspect-ratio CSS

الخاصية 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).