الحفاظ على نسبة العرض إلى الارتفاع Div بناءً على الارتفاع

قد يكون الحفاظ على عرض العنصر كنسبة مئوية من ارتفاعه أمرًا صعبًا. في حين أن استخدام قيمة النسبة المئوية للحشوة العلوية يمكن أن يحقق تأثيرًا معاكسًا، فإن الحشو لليسار كنسبة مئوية يعتمد على عرض الكائن، وليس ارتفاعه.

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

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

في هذا المثال، يحتوي عنصر .box على ارتفاع مائع بنسبة 50% ونسبة عرض إلى ارتفاع تبلغ 2:1. عندما يتغير ارتفاع الحاوية، يتم ضبط ارتفاع الصندوق وعرضه وفقًا لذلك، مع الحفاظ على نسبة العرض إلى الارتفاع.

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