1

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!

1
  • Seja mais claro, ofereça mais detalhes, da forma que está se torna uma questão ampla... Coloque um exemplo do que pretende... Boa sorte
    – MagicHat
    Commented 29/04/2017 às 14:38

2 Respostas 2

1

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>

0

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!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .