Skip to content

Div Square, width size based on 100% height

I’m trying to make a responsive square with the width size based on the (100%) height of the element. I believe it’s impossible using only CSS.

The square width should be equal to the height (100% of the large container. The large container is more than 100% of the screen). The ratio has to be width=height to keep the square.


Ok here the solution.

<div id="square" style="background-color:black;height:100%">test</div>


function updateWidth()
var square = $('#square');
var size = square.height();