Сделать высоту равной ширине css

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

Например, для создания квадратного блока можно использовать следующий CSS-код:

.square {
  position: relative;
  width: 50%;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.square > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Здесь мы создаем блок .square с шириной 50%. Затем мы используем псевдоэлемент ::before, чтобы задать высоту блоку. padding-top: 100% устанавливает высоту блока в 100% от его ширины, создавая неявно квадрат.

Затем мы создаем вложенный блок (.square > div), который займет всю площадь блока .square с помощью CSS-свойств position: absolute; top: 0; left: 0; bottom: 0; right: 0;.

Таким образом, блок .square будет просто блоком с заданной шириной, а его псевдоэлемент ::before сделает его квадратным. Вложенный блок .square > div может быть использован для наполнения контентом.