поддержание соотношения сторон в элементах автоматического определения Div

При создании повторного размерного элемента, который остается центрированным на экране, важно гарантировать, что его соотношение сторон, независимо от изменений в размере окна. Это может быть достигнуто с использованием методов CSS.

CSS Solution:

свойство аспекта-Ratio обеспечивает простое решение для поддержания соотношения аспектов в изменении размера элементов DIV. Следующий код CSS демонстрирует, как достичь этого:

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;
}

объяснение:

• . В пределах указанных ограничений:

• максимум 90% от доступной ширины

  максимум 960px
  ширина, которая поддерживает отношение аспекта по отношению к доступной высоте (90vh, умноженная на var (-R))
  Результат:
• ]

] вышеупомянутый код CSS приводит к тому, что в элементе DIV остается центр центрированного на экране. Это решение работает эффективно для изменения размера как ширины, так и высоты элемента.