Чтобы добиться гибкого макета в CSS, где высота элемента равна его динамической ширине в JavaScript, вы можете использовать следующие методы:

Метод 1: использование JavaScript для установки высоты.
Один из подходов заключается в использовании JavaScript для динамического расчета ширины элемента, а затем соответствующей установки его высоты. Вот пример:

HTML:

<div id="container"></div>

JavaScript:

window.addEventListener('resize', function() {
  var container = document.getElementById('container');
  var width = container.offsetWidth;
  container.style.height = width + 'px';
});
// Initial height calculation
window.dispatchEvent(new Event('resize'));

Этот метод использует свойство offsetWidthдля получения ширины элемента контейнера. Затем он устанавливает высоту элемента в соответствии с шириной.

Метод 2: использование соотношения сторон CSS
Другой подход заключается в использовании свойств соотношения сторон CSS для создания блока с динамическим соотношением ширины к высоте. Вот пример:

HTML:

<div class="container"></div>

CSS:

.container {
  width: 100%;
  aspect-ratio: 1/1; /* Set the desired width-to-height ratio */
}

Этот метод использует свойство CSS aspect-ratioдля поддержания определенного соотношения ширины и высоты. Контейнер автоматически отрегулирует свою высоту в зависимости от ширины.