CSS высота как ширина

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

1. height: auto; — устанавливает высоту элемента равной его содержимому, но это может не дать желаемого результата, если содержимое изменяется динамически или внутри элемента присутствуют внутренние отступы и границы.
2. padding-bottom: 100%; — устанавливает нижнее поле элемента в 100% от его ширины. Это заставляет элемент растянуться вертикально пропорционально его ширине.
3. height: 0; padding-bottom: 100%; — это комбинация свойств, которая также растягивает элемент пропорционально его ширине. Однако, поскольку высота установлена на 0, содержимое элемента может выходить за его границы или скрываться, если не используется свойство overflow: hidden;.

Пример:

.my-element {
  width: 200px; /* устанавливаем ширину */
  height: 0;
  padding-bottom: 100%; /* устанавливаем высоту, равную ширине */ 
  overflow: hidden; /* скрываем содержимое, выходящее за границы элемента */
}

Этот код установит высоту элемента my-element равной его ширине (200px в данном примере).