放大整个 div

Question

我想知道是否可以按比例放大 div 的百分比及其内容？

我正在构建的游戏是基于像素的，所以我不能在 gameContainer 中使用百分比（背景图像也需要缩放）

这是我想要达到的目标的演示 http://codepen.io/friendlygiraffe/pen/MKwjNE

<div id="gameContainer">
<div id="scene2">
        <div id="box1"></div>
<div id="box2"></div>           
</div>
</div>

Answer 1

不确定哪个div 需要scaling，但您可以在需要缩放的项目的CSS 中使用transform: scale(); 属性。

如：

#box2 {
    top : 80px;
      position: absolute;
      background-position: center; 
  background-size: contain;
  background-image: url("http://blog.codepen.io/wp-content/uploads/2012/08/main_logo.jpeg");
    width: 200px; 
    height: 100px;
  transform: scale(2)
}

这会使 box2 div 中内容的比例加倍。然后相应地响应新值。

示例： codepen