Question

问题陈述：

我使用以下内容仅使用CSS缩放<div>窗口重新调整大小：

position:       relative;
width:          40%;
height:         0em;
padding-bottom: 30%;

并且就宽度和高度而言都有效。

除法包含一个静态<img>，它也可以缩放。

但是，内容还包括使用new Image()创建它的运动图像（.png）以及用于移动它的更多JS代码。这个.png 不缩放<div>的大小。事实上，这个.png甚至没有表现出来。

如果我使用Safari进行放大和缩小，则所有内容都会缩放 - <div>大小和静态图像。 .png也表现出应有的效果。

问题：

那么......我如何使用替换上述position-width-height-paddingbottom组的变换和类似调用来模拟缩放？

2015年9月27日

[已编辑]

FWIW，我对jsFiddle很新，只是添加了一个jsFiddle。希望这结束所有讨论（当然，除了解决这个问题的解决方案之外）... http://jsfiddle.net/johnlove/yL2td3r2/

2015年9月5日

[已编辑]

我不知道这是否会适得其反......但是：

（a）寻求代码帮助的问题必须包括所需的行为：

我已经说过“仅使用CSS缩放窗口重新调整<div>”

（b）特定问题或错误：

我已经说过.png 不缩放<div>的大小。

（c）重现它所需的最短代码

我故意传递了这个因为我选择了如何使用变换而不是上面的灰色块。此外，我知道转换工作，包括.png。我不知道的是如何根据不断变化的窗口宽度调整transform: scale[xxx]。

对于那些更好奇的人，请注意：www.lovesongforever.com/50。我试图用窗口宽度缩放的“野兽”是“相机快门”jQuery插件。顺便说一句，上面的“.png”是黑色相机快门本身。

（d）以下其他回复转入SVG的土地，我根本不理解任何一个，没有，拉链。

然而，再说一遍，我刚满75岁，缺乏理解是我们老人的典型...... 1940年8月，如果你需要准确的话。

Answer 1

第一步是承认你有问题 - 在这种情况下，问题是你对CSS的成瘾（以系统的方式做几何上全面的事情）。没关系，这是一个行业上的灾难性遗产，甚至还没有开始[等等]的过程试试SVG-everything方法，它对我有用 https://github.com/Terebinth/Vickers

（维克斯作为一个整体迫切需要重构 - 数据流/数据结构设置和性能问题的缺陷与不充分使用shouldComponentUpdate事物的Immutables库有关，以及风格和一致性 - 但它仅用于原型设计，我已经继续前进。我希望它能激发人们摆脱HTML / CSS贫民窟）