Como manter a proporção de largura e altura

Aprenda como usar CSS para manter as proporções de largura e altura dos elementos.

Como implementar - Altura igual à largura

Primeiro passo - Adicionar HTML:

Use elementos de contêiner, como <div>Se você quiser que contenha texto, adicione um elemento filho:

<div class="container">
  <div class="text">Algum texto</div> <!-- Se você quiser que haja texto dentro do contêiner -->
</div>

Segundo passo - Adicionar CSS:

para padding-top Adicione valores em porcentagem para manter a proporção de largura e altura do DIV. O exemplo a seguir criará um DIV com uma proporção de largura e altura de 1:1 (largura e altura sempre iguais):

Exemplo - Proporção de largura e altura 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Proporção de largura e altura 1:1 */
  position: relative; /* Se você quiser que haja texto dentro */
}
/* Se você quiser que haja texto dentro do contêiner */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Experimente pessoalmente

Outras proporções de largura e altura

Exemplo - Proporção de largura e altura 16:9

.container {
  padding-top: 56.25%; /* Proporção de largura e altura 16:9 (9 dividido por 16 é 0.5625) */
}

Experimente pessoalmente

Exemplo - Proporção de largura e altura 4:3

.container {
  padding-top: 75%; /* Proporção de largura e altura 4:3 (3 dividido por 4 é 0.75) */
}

Experimente pessoalmente

Exemplo - Proporção de largura e altura 3:2

.container {
  padding-top: 66.66%; /* Proporção de largura e altura 3:2 (2 dividido por 3 é 0.6666) */
}

Experimente pessoalmente

Exemplo - Proporção de largura e altura 8:5

.container {
  padding-top: 62.5%; /* Proporção de largura e altura 8:5 (5 dividido por 8 é 0.625) */
}

Experimente pessoalmente

Propriedade CSS aspect-ratio

Em navegadores mais novos, você pode usar simplesmente CSS aspect-ratio Propriedade:

Exemplo - Proporção de largura e altura 3:2

.container {
  aspect-ratio: 3 / 2;
}

Experimente pessoalmente

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.