Question

我正在开发HTML5 css3＆amp;基于js的游戏。所以我希望一切都应该可以调整大小，如文字，字体，图像根据宽度和＆amp;屏幕高度。对于文字＆amp;字体我发现，而不是在px中放置值，我将使它成为em，以便它将相对于身体字体大小的比例。现在我想知道我怎么能这样做的图像＆amp;其他的东西。

<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

以％或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％;位置：相对; / *其他什么* /}

HTML图片＆amp;其他组件根据页面宽度调整大小

3 个答案: