Como fazer - Proporção de aspecto
Aprenda como manter a proporção de um elemento com CSS.
Proporção da tela
Crie elementos flexíveis que mantenham sua proporção (4:3, 16:9 etc.) quando redimensionados:
O que é proporção?
A proporção de aspecto de um elemento descreve a relação proporcional entre sua largura e sua altura. Duas proporções de vídeo comuns são 4:3 (o formato de vídeo universal do século 20) e 16:9 (universal para televisão HD e televisão digital europeia, e padrão para vídeos do YouTube).
Como - Altura igual à largura
Etapa 1) Adicionar HTML:
Use um elemento container, como <div>, e se quiser texto dentro dele, adicione um elemento filho:
Exemplo
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Etapa 2) Adicionar CSS:
Adicione um valor percentual para padding-top
manter a proporção da DIV. O exemplo a seguir criará uma proporção de 1:1 (a altura e a largura são sempre iguais):
Exemplo 1:1 Proporção de Aspecto
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Outras proporções:
Exemplo 16:9 Proporção de Aspecto
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Exemplo 4:3 Proporção de Aspecto
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Exemplo 3:2 Proporção de Aspecto
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Exemplo 8:5 Proporção de Aspecto
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}