Question

I am developing HTML5 css3 & js based game.
So i want everything should be resizable such as text, font, images according to width & height of screen.
For text & font i found that instead of putting value in px i will make it em so that it will be relatively scale accourding to body font size.
Now i want to know how can i do this for images & other stuff.

<div id="titlediv" style="text-align: center; position: relative; height: 20%;
    width: 90%; margin: 0px auto; padding: 40px 0px 40px 5px; margin-top: 0%;">
        <p style="font-family: 'Arial'; font-size: 400%;">
            Quiz Game
        </p>
        <br />
        <p style="font-family: 'Arial Rounded MT Bold'; font-size: 150%;">
            The definitive place for games
        </p>
</div>

So this is just for game title rest of code is same like this

Answer 1

In your css use % values for width and height instead of px values.

img.thumbnail {
  width: 25%
  height: 25%;
  /* Whatever else */
}