ضمان الحفاظ على نسبة العرض إلى الارتفاع في إطار العرض

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

الاستفادة من خاصية نسبة العرض إلى الارتفاع

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

مثال على التنفيذ للتوضيح وظيفة خاصية نسبة العرض إلى الارتفاع، يمكن استخدام الكود التالي:

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 { نسبة العرض إلى الارتفاع: 1 / 1؛ الخلفية: برتقالي؛ } .ar-1-19 { نسبة العرض إلى الارتفاع: 16 / 9؛ الخلفية: وردي؛ } شعبة { أقصى عرض: 100 فولت واط؛ أقصى ارتفاع: 100vh؛ الهامش السفلي: 5vh؛

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}