CODEWITHSUNDEEP
javascripthtmlcss
JMohasin
JMohasin

Reputation: 533

HTML image & other components resize according to width of page

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

Upvotes: 1

Views: 1473

Answers (3)

Ghost Answer
Ghost Answer

Reputation: 1498

also use the position and float with width and height img.thumbnail { width: x% height: y%; position:relative; /* Whatever else */ }

Upvotes: 0

Abhidev
Abhidev

Reputation: 7253

set all the dimensions of divs.images in % or em. For e.g

<div class="row">
  <img src ="url" />
  <img src ="url" />
  <img src ="url" />
  <img src ="url" />
</div>

css :

.row{width:100%}
.row img{width:20%; display:inline; margin:5% 2.5%}

Make sure that the sum total width of the images inside row div is always 100% including padding and margin or else it will distort the layout.

Upvotes: 0

CaldwellYSR
CaldwellYSR

Reputation: 3196

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

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

Upvotes: 3

Related Questions