HTMLの画像と他のコンポーネントはページの幅に応じてサイズを変更します

Question

私はHTML5 css3 & jsベースのゲームを開発しています。 だから私はすべてのテキスト、フォント、画像のような幅の&画面の高さに応じてサイズを変更する必要があります。 テキストの場合、&フォントの場合、pxに値を入れるのではなく、ボディのフォントサイズに合わせて相対的にスケールするようにします。 今私は画像&他のもののためにこれを行うことができます知りたいです。

<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> 

だから、これは単にコードのゲームタイトルの残りのためのあなたの幅と高さのCSSを使用％値の代わりに、ピクセル値でこの

Answer 1

のように同じです。

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

Answer 2

％またはemでdivs.imagesのすべての寸法を設定します。例えば

<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%} 

行のdiv内の画像の合計幅が100％パディングとマージンのか、他を含む、常にそれがレイアウトを歪曲することを確認してください。

Answer 3

また、幅と高さで位置と浮動を使用します。img.thumbnail { width：x％height：y％;ポジション：相対; /*その他のもの* /}