Preciso de elementos quadrados e que tenham a altura e largura responsivos. Mas como crio uma altura responsiva que seja sempre igual a largura em %? Obrigado!
2 Respostas
Tem um exemplo aqui: http://carlosmaniero.blogspot.com.br/2013/08/criando-quadrados-responsivos.html
OBS: Estou colocando aqui o exemplo do site para que em caso do site sair do ar o exemplo ficará aqui para pesquisas futuras.
Créditos para Carlos Maniero.
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Gera um quadrado responsivo. */
.square{
width: 48%;
height: 0; /* A mágica está aqui */
padding-bottom: 48%; /* ... e está aqui */
margin: 1%;
float: left;
position: relative;
}
/*
Veja mais sobre como centralizar o texto no box aqui:
http://css-tricks.com/centering-in-the-unknown/
*/
.block{
position: absolute;
text-align: center;
background: #1a1a1a;
width: 100%;
height: 100%;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.centered {
display: inline-block;
vertical-align: middle;
width: 80%;
background: #222;
color: #FFF;
}
<div class="square">
<div class="block">
<div class="centered">
<h1>Box 1</h1>
<p>Não importa quanto texto eu coloque aqui. Ele vai ficar centralizado</p>
</div>
</div>
</div>
<div class="square">
<div class="block">
<div class="centered">
<h1>Só o título</h1>
</div>
</div>
</div>
Bom, respondendo minha propria pergunta para terceiros que no futuro passem pela mesma duvida. Sim, a resposta acima esta correta. Padding sempre é relativa a largura, dessa forma colocando padding-bottom no lugar da altura, e dando-lhe um valor igual ao valor do width em porcentagem, você cria uma altura e altura iguais e responsivas. O problema com essa solução é que por vezes precisamos da altura (height) definidas para o elemento, para algum calculo para seus elementos filhos, tipo um height: 100%. A solução para isso então, é usar a medida VW, que é baseada sempre na largura do viewport. Logo, você colocando widht: valorVW e height: valorVW, você define uma altura ao elemento, e sua largura e altura serão sempre iguais e responsivas!