[Solved] Scaling font and img according to window size

[Frenchness]

I am running into a specific problem that probably is easy to solve, but my head…
I need two containers, left with an image, right with text.
Both containers should be square and fill half of the page’s width.
The two should be placed halfway the page.
If the user scales the browser window, the containers should upscale or downscale and stay square.
The above is doable, albeit that ‘halfway the page’ is puzzling since after all, I have no idea of the browser window size yet and if I make it 50% the container might no longer be a square since the width is usually more than the height. But to add to that…
Their content should be scaled accordingly. Image seems doable but text…
I hope someone has a bright idea for this one :)

[Paulie_D]

Both containers should be square and fill half of the page’s width.

Not entirely sure if you can have both without page overflow since the width of the screen is usually higher than it’s height.

[Paulie_D]

http://codepen.io/Paulie-D/pen/RNRNeV?editors=110

[Frenchness]

Dear Paulie, thank you for your response!
That was exactly what I said :D The width of the window is usually bigger than the height :D

In Opera (quick test) the containers end up under one another if their height becomes bigger than half the width of the window. They should stay next to one another though.
I spent time on it trying to get it to work since I think it should be possible, to prevent the containers from ever ending up under one another. Maybe a ‘faux square’ sneakily partially hidden by the other container…
If all else fails, I will simply do it with static containers and be done with it. But the challenge… the challenge! :D

[Author]

Posts