I have 4 squares lined up on my page. Each one has a property of 25% of width. So between all cover 100% of the width of the screen. This is liquid design so that regardless of the width of the screen with which you visualize the squares always fill all the space. The problem I have is THE HIGH. I can not give it high percentages because the container does not have a fixed height, but it changes according to the content. I can not put pixels either high, because for example if I put 250px high x 25% wide, a laptop 1366 x 760 would look good, BUT, when you use a computer 1600 x 1080, the perfect square It would be rectangular, since the width would expand more to cover everything but the height would be the same as always. it is understood? What I want is a perfect square that looks the same in all screen sizes. For this it occurred to me to use java script, the following code:
s2d = $( 'div' ).outerWidth( ); //recojo el ancho del elemento
$( 'div' ).css( 'height', s2d ); //le pongo a mi elemento de ALTO el mismo ancho recogido, para que sea un cuadrado perfecto
But IT DOES NOT WORK T_T .. I mean the code yes, but my square attempt looks rectangular. And this in the physical world would be impossible, that is, I should get a perfect square. I would like two things: First, please explain to me why you see a rectangle and not a square, and second, how do I solve it, how do I get a perfect square? Is there a standardized measure to obtain a square? It is clear that I would have to subtract a bit from my height so that it is a perfect square, but my fear is that in some computers the 100x100 measure looks like a rectangle and in others it looks like a square ... that would be a problem.