الحفاظ على نسبة الارتفاع في عناصر div التلقائية

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

حل CSS:

يوضح رمز CSS التالي كيفية تحقيق ذلك:

الجسم { الارتفاع: 100VH ؛ الهامش: 0 ؛ العرض: فليكس. تبرير المحتوى: المركز ؛ محاذاة عناصر: المركز ؛ الخلفية: رمادي. } .منصة { -R: 960 /540 ؛ // تحديد نسبة العرض إلى الارتفاع المطلوبة (العرض / الارتفاع) جانب الجانب: var (-r) ؛ // اضبط نسبة العرض إلى الارتفاع العرض: min (90 ٪ ، min (960px ، 90VH*(var (-r)))) ؛ // قم بتعيين أقصى عرض وارتفاع أثناء الحفاظ على النسبة العرض: فليكس. تبرير المحتوى: المركز ؛ محاذاة عناصر: المركز ؛ خلفية: الجهود الخطي (30DEG ، RED 50 ٪ ، شفاف 50 ٪) ، // أضف التدرج لتصور نسبة العرض إلى الارتفاع المحفوظة الشوكولاتة }

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

التفسير:

، فإن خاصية Ratio الجانبية تنشئ نسبة الارتفاع المطلوبة للعنصر ، والتي يتم حسابها بناءً على العرض الأولي وقيم الارتفاع (960px و 540px ، على التوالي). القيود المحددة:
• بحد أقصى 90 ٪ من العرض المتاح
  بحد أقصى 960px
  يضاف التدرج لإثبات بصريًا أنه يتم الحفاظ على نسبة العرض إلى الارتفاع ، حيث تظل زاوية التدرج ثابتة بغض النظر عن التغييرات في أبعاد العنصر.
  • يعمل هذا الحل بشكل فعال لتغيير حجم كل من عرض وارتفاع العنصر.