خصوصیت aspect-ratio CSS

التعريف والاستخدام

aspect-ratio الخاصية يسمح لك بتحديد نسبة العرض والارتفاع للعنصر.

إذا تم تعيين aspect-ratio و width الخاصية، سيتم تعديل الارتفاع وفقًا لنسبة الأبعاد المحددة.

للتفهم أفضل aspect-ratio الخاصية، انظر العرض.

نصيحة:في التخطيط التفاعلي aspect-ratio الخاصية، عندما يكون حجم العنصر يتغير بشكل متكرر، تريد الحفاظ على نسبة العرض والارتفاع.

مثال

مثال 1

إضافة نسبة الأبعاد للعناصر

div {
  aspect-ratio: 3 / 2;
}

تجربة شخصية

مثال 2

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

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div الزاوية</div>
  <div الزهور على الشارع</div>
  <div>الجبال</div>
  <div>Cinque Terre</div>
</div>

تجربة شخصية

جملة CSS

aspect-ratio: number/number|initial|inherit;

قيمة الخاصية

القيمة الوصف
number الرقم الأول يحدد قيمة العرض في نسبة الأبعاد.
number

الرقم الثاني يحدد قيمة الارتفاع في نسبة الأبعاد.

اختياري. إذا لم يتم تعيينه، فإن قيمة الارتفاع افتراضية هي 1.
initial أعد هذا الخاصية إلى قيمتها الافتراضية. انظر initial.
inherit يرث هذا الخاصية من عنصر الأب. انظر inherit.

تفاصيل التقنية

القيمة الافتراضية: auto
التنسيق الوراثي: لا
صنع الرسوم المتحركة: يدعم. انظر:خصائص الرسوم المتحركة.
الإصدار: CSS3
جافا سكربت الجملة: object.style.aspectRatio="16/9"

دعم المتصفح

الرقم في الجدول يعكس إصدار المتصفح الذي يدعم الخاصية لأول مرة.

Chrome Edge Firefox Safari Opera
88 88 89 15 74

الصفحات ذات الصلة

دليل:وحدة نظام الشبكة CSS

مرجع:خصائص Object-fit CSS

مرجع:خصائص Object-position CSS