Criar um quadrado é muito fácil, não? Basta setar a altura igual a largura e estamos felizes. Porém, por se tratar de um quadrados responsivo, estamos pensando em porcentagem.
Se eu definir um quadrado com 10% de largura e 10% de altura. Adivinha o que vai acontecer? Você acertou! Não será um quadrado
Exemplo:
10% x 10%
Depois de muito tempo estudando uma maneira de fazer um quadrado responsivo, cheguei a seguinte solução:
O padding é sempre relativo a largura, logo, se você definir a altura do elemento com 0 e o padding-bottom com a porcentagem da altura você terá o resultado esperado. Segue exemplo abaixo:
2 comentários:
VOCÊ SALVOU A MINHA VIDA IRMÃO!
Vi no github. Engraçado como eu tava me sentindo um idiota fazendo EXATAMENTE do jeito que você comentou inicialmente no post, valeu demais por compartilhar conosco
procurei tanto por isso , valeu... deu certinho
Postar um comentário