CSS: Largura e Altura constante

Aprenda a criar uma caixa/div com largura e altura constante usando CSS.

Olá, como vai? Hoje vamos criar uma caixa com largura e altura constante usando CSS. Vamos lá!

Como funciona

A ideia é:

Aplicar padding-top no :before (pseudo-elemento), 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="box-ratio"></div>

CSS

.box-ratio {
  background: #9c27b0;
  width: 200px;
}
 
.box-ratio:before {
  content: "";
  padding-top: 100%;
  float: left;
}
 
.box-ratio:after {
  content: "";
  display: block;
  clear: both;
}

Explicação

Defina uma largura (width) para o elemento principal (.box-ratio).
Você pode editar o padding-top no ::before criando novas proporções.

Exemplo de código:

https://codepen.io/fabriziofeitosa/pen/mdwmdzv

Espero que eu possa ter ajudado. Até a próxima! 🚀