根据页面宽度调整HTML图像和其他组件的大小

我正在开发基于js的HTML5 css3 &游戏。所以我希望一切都应该可调整大小，如文本，字体，图像根据宽度&屏幕的高度。对于文字&字体我发现，而不是将价值放在px我会使它em，以便它将相对规模accourding身体字体大小。现在我想知道我该如何做图像&其他的东西。根据页面宽度调整HTML图像和其他组件的大小

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

所以这只是对代码的游戏标题其余相同这样

来源

2012-02-23 JMoh

那么这些只是文本...你应该使用ems进行调整大小，然后文本对齐中心应该保持它们到位。 – CaldwellYSR 2012-02-23 06:33:03

在宽度和高度你的CSS使用％值，而不是像素值。

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

来源

2012-02-23 05:38:19 CaldwellYSR

感谢您的快速响应，但我有很多图像，所以他们的位置也是我想根据规模设置。我想说，我有16个图像瓷砖（4 * 4），所以它应该看起来一致 – JMoh 2012-02-23 05:45:24

@JMoh编辑你的问题和推你的代码，以便更好地理解是你想要的 – sandeep 2012-02-23 05:47:48

如果你想让他们调整大小这将是百分比。这个位置将是一个单独的问题。像sandeep说的发布你的代码并修复这个问题。 – CaldwellYSR 2012-02-23 05:59:16

以％或em设置divs.images的所有尺寸。对于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%}

确保该行的div内图像的总和宽度始终是100％，包括填充和保证金，否则它会扭曲的布局。

来源

2012-02-23 05:57:46 Abhidev

也使用位置并且宽度和高度浮动img.thumbnail宽度：x％高度：y％;位置：相对; /*其他任何* /}

来源

2012-02-23 05:59:09

根据页面宽度调整HTML图像和其他组件的大小

回答

相关问题