CSS: Largura e Altura constante

Garante que um elemento com variável width reterá um height de valor proporcional.

• Aplique padding-top no :before (pseudo-element), tornando o height do elemento igual a uma porcentagem do seu width.
• A proporção de height e width pode ser alterada conforme necessário. Por exemplo, um padding-top de 100% criará um quadrado responsivo (proporção de 1: 1).

HTML

<div class="constant-width-to-height-ratio"></div>

CSS

.box {
  background: #9C27B0;
  width: 200px;
}

.box:before {
  content: '';
  padding-top: 100%;
  float: left;
}

.box:after {
  content: '';
  display: block;
  clear: both;
}

Exemplo de código:

Você pode editar o padding-top no ::before criando novas proporções. Teste!