css - 我如何使用 transform 仅通过 css 来缩放除法

Question

问题陈述:

我正在使用以下内容来缩放 <div>仅使用 CSS 调整窗口大小:

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

就宽度和高度而言，它是有效的。

该部门包含一个静态 <img>而且它的扩展性也不错。

但是，内容还包括使用 new Image() 的动态图像 (.png)创建它和进一步的 JS 代码来移动它。而且这个 .png 不随 <div> 的大小缩放.事实上，这个 .png 甚至没有显示。

如果我使用 Safari 进行放大和缩小，一切都会缩放 - <div>大小和静态图像。 .png 也会按应有的方式显示。

问题:

那么...我如何使用变换和类似的调用来模拟缩放以替代上述位置-宽度-高度-paddingbottom 组？

[已编辑] 2015 年 9 月 27 日

FWIW，我对 jsFiddle 很陌生，只是添加了一个 jsFiddle。希望这会结束所有讨论(当然，这个 jsFiddle 中说明的问题的解决方案除外)... http://jsfiddle.net/johnlove/yL2td3r2/

[已编辑] 2015 年 9 月 5 日

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

(a) 寻求代码帮助的问题必须包括所需的行为:

我已经说过“使用 CSS 调整窗口大小来缩放 <div>”

(b) 特定问题或错误:

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

(c) 重现它所需的最短代码

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

我试图用窗口宽度缩放的“野兽”是“相机快门”jQuery 插件。顺便说一句，上面的“.png”是黑色相机快门本身。

(d) 下面的其他回复转入 SVG 领域，我根本不理解任何内容，没有，zip。

Answer 1

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

注意在第 63 行使用 transform_matrix https://github.com/Terebinth/Vickers/blob/master/lib/vickers__workshop.coffee#L63

(作为一个整体，Vickers 迫切需要重构——数据流/数据结构设置方面的不足，以及与 shouldComponentUpdate 的 Immutables 库使用不足相关的性能问题，以及只是风格和一致性——但它仅用于原型(prototype)制作，我已经继续前进。我希望它能激励人们走出 HTML/CSS 贫民窟)