How to Make Square and Responsive Divs

Question

I need square elements that have responsive height and width. But how do I create a responsive height that is always equal to width in %? Thank you!

Answer 1

Well, answering my own question to third parties who in the future will experience the same doubt. Yes, the above answer is correct. Padding is always relative to width, thus placing padding-bottom in place of height, and giving it a value equal to the width value in percentage, you create an equal and responsive height and height. The problem with this solution is that sometimes we need the height (height) set for the element, for some calculation for its child elements, like a height: 100%. The solution to this then, is to use the VW measure, which is always based on the width of the viewport. Soon, you putting widht: valueVW and height: valueVW, you set a height to the element, and its width and height will always be equal and responsive!

Answer 2

There’s an example here: http://carlosmaniero.blogspot.com.br/2013/08/criando-quadrados-responsivos.html

OBS: I am putting here the example of the site so that in case the site goes off the air the example will be here for future research.

Credits for 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>