In my HTML, I want to align 8 colored divs horizontally separated by constant space.
I have a <table> as container for these divs. The size is specified in percent(%) instead of pixels(px) for scaling.
When a user resizes the window the divs also get resized but not in equal proportion (i.e. height!=width) and results in looking like a rectangle rather than a square. I’d like to align these divs in such a way that when a user resizes the window the divs also get resized in equal proportion, and also retain their square shape.
There is no pure HTML/CSS solution to scaling divs in a manner which maintains their proportions – you’ll need to use some scripting. See a JQuery solution you could use here: Scale a div to fit in window but preserve aspect ratio