I need square elements that are responsive in height and width. But how do I create a responsive height that is always equal to width in%? Thanks!
How to make square and responsive Divs
0
asked by anonymous 29.04.2017 / 15:56
2 answers
0
Well, answering my own question for third parties who in the future will have the same doubts. Yes, the answer above is correct. Padding is always relative to width, thus putting padding-bottom in place of height, and giving it a value equal to the width value in percentage, you create equal and responsive height and height. The problem with this solution is that sometimes we need the height (height) defined for the element, for some calculation for its child elements, type a height: 100%. The solution to this then, is to use the VW measure, which is always based on the width of the viewport. So you put widht: valueVW and height: valueVW, you set a height to the element, and its width and height will always be equal and responsive!
19.05.2017 / 22:44
0
You have an example here: link
OBS: I am putting here the example of the site so that in case the site leaves the air the example will be here for future searches.
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>
29.04.2017 / 16:42