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>

Так что это только для названия игры, остальной код такой же, как этот

Answer 1

В вашем css используйте значения% для ширины и высоты вместо значений px.

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

Answer 2

также используйте позицию и плавающее с шириной и высотой img.thumbnail {width: x% height: y%;позиция: относительная;/ * Что бы то ни было * /}

Answer 3

установить все размеры divs.images в% или em. Например,

<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%, включая отступы и поля, иначе это приведет к искажению макета.