Javascript HTML图像及；其他组件根据页面宽度调整大小

我正在开发基于HTML5CSS3和js的游戏。 所以我希望所有的东西都可以根据屏幕的宽度和高度调整大小，比如文本、字体、图像。 对于文本和字体，我发现不是将值放在px中，而是将其设为em，这样它将根据正文字体大小进行相对缩放。 现在我想知道我如何才能做到这一点的图像和其他东西

<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中，使用%值表示宽度和高度，而不是px值

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

---

以%或em.为单位设置divs.images的所有尺寸，例如

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

确保行div内图像的总宽度总和始终为100%，包括填充和边距，否则会扭曲布局

同时使用位置和浮动宽度和高度img.thumboil{ 宽度：x%高度：y%；位置：相对； /*还有什么*/}

---

谢谢你的快速回复，但是我有很多图片，所以我想根据比例设置它们的位置。我想说，我有16个图像平铺（4*4），所以它应该看起来consistent@JMoh编辑你的问题并推送你的代码，以便更好地理解你想要的是什么，如果你想让他们调整大小，那将是百分比。这个职位将是一个独立的问题。就像sandeep说的，发布你的代码并解决问题。这些只是文本。。。您应该使用ems调整它们的大小，然后文本对齐中心应该将它们保持在原位。

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