Как сделать высоту равной ширине CSS

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

Например, если нужно сделать квадратный блок, можно задать ширину и высоту в процентах и добавить padding-top или padding-bottom со значением 100%:

.square {
  width: 50%;
  height: 0;
  padding-top: 50%;
}

В этом примере блок будет занимать половину ширины родительского элемента и будет иметь высоту, равную половине ширины блока.

Также можно использовать свойство aspect-ratio, которое задает соотношение сторон элемента. Например, чтобы сделать квадратный блок, можно задать aspect-ratio: 1 / 1;:

.square {
  width: 50%;
 -ratio: 1 / 1;
}

В этом примере блок будет занимать половину ширины родительского элемента и будет иметь высоту, равную ширине блока.