Fabrizio Feitosa

Fabrizio Feitosa

Exploro o universo do desenvolvimento com artigos, tutoriais e reflexões sobre tecnologia — compartilhando aprendizados reais e dicas práticas do dia a dia.


Voltar

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 é:

  1. Aplicar padding-top no :before (pseudo-elemento), tornando o height do elemento igual a uma porcentagem do seu width.
  2. 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! 🚀