Question

Is there a purely CSS-based way to size a block-level element such that it fills its parent as much as possible, but remains square?

---

An interesting use case

I have written a very simple analogue clock using mostly CSS, and a pinch of JavaScript.

http://jsbin.com/iqicuk

It has been written scalably:

http://jsbin.com/emiyer

I would like to scale it to fill the page, but stay in proportion, obviously.

If I set the width and height of #clock to 100%, of course, it will be pulled out of proportion:

http://jsbin.com/esubol

Answer 1

A solution in progress

thirtydot came up with a very clever technique that takes advantage of the fact that images with only one defined dimension scale proportionately, and he harnesses this to size the element. We now have a clock that can scale properly, but only if the viewport width is greater than the height, not the other way around:

http://jsbin.com/isixug

Likewise, if we change img and #clock to have a defined width, instead of a defined height, then we have a clock that can scale properly, but only if the viewport height is greater than the width:

http://jsbin.com/awucun

---

The solution

We can combine the two ‘tricks’ above, that each only work for one orientation, by using a media query for orientation, and specifying the right ‘trick’ depending on the viewport orientation. We now have a completely scalable clock, no matter what the viewport orientation or size:

http://jsbin.com/okodib