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

扩大整个div

1 个答案: