Javascript 使用CSS变换按比例调整大小和扫描

我想使用CSS转换来做一些图像布局，并使图像布局在不同的屏幕宽度上保持一致。（为了这篇文章的目的，我只讨论宽度和x（左）值。）我需要做这些布局的所有数据都在数据库中

当然，如果我能为每个布局设计一个具有专用样式的HTML布局，我会很好。有三个盒子，两个较小的盒子，一个较大的盒子是较小盒子的3倍大。较小的框分别为窗口宽度的10%，较大的框为30%。盒子的间距相等，最左边的一个距离左边10%，中间较大的一个距离左边30%，最后一个距离左边70%。这将在两个框之间留出相等的空间（10%）

img#smallA {  /* CSS for the first box */

position: absolute;
top: 10%;
left: 10%;
width: 10%;
}

仅使用CSS时，间距是均匀的。

在上面只使用CSS的画笔上，您可以随意调整窗口宽度，大小和间距保持一致；与屏幕宽度成比例，就像我们编码的那样

因此，一个人应该能够通过转换做同样的事情，这似乎是合乎逻辑的。可以使用JS获得窗口宽度，可以使用变换设置框的宽度，也可以使用变换设置x值。单击较大的框以运行sizeAndPos（）函数。现在，如果将窗口宽度调整为1000像素（观察CodePen屏幕中心的小gizmo），此JS/transform方法工作正常，布局与另一种类似。但是如果你拉伸它，间距马上开始变小。（请记住在调整大小后单击较大的框）。我认为它能在1000像素宽下工作的原因是b/c在窗口宽度，盒子在其自然宽度。但我不明白为什么它只在那种情况下有效

间隔现在已关闭；框2和框3之间的间隙太大。

对于任何看代码的人来说，您可能想知道为什么我要将每个图像的原始宽度（origWidth）传递给函数。这是因为CSS scale transform函数根据图像的原始尺寸调整图像大小（将图像缩放为1会得到100%的原始尺寸）。因此，要按比例调整大小，首先必须计算出框的宽度（屏幕宽度的10%或30%，取决于框）。然后，你必须将这个数量除以原始大小，以得到适当的比例来进行缩放。小盒子宽100像素，大盒子宽300像素

---

当然，这在转换中是可能的。我曾尝试单独设置变换属性，以控制操作的顺序，但没有帮助。有人能告诉我为什么这不起作用吗？

在尝试将这一方法变得过于复杂后，我找到了答案。更改元素的“变换原点”属性。此属性的默认值为“中心”两个轴。但我们需要从左上角开始转换

img#smallA {

    transform-origin: left top;
    position: absolute;

}

---

在把这条路弄得太复杂之后，我找到了答案。更改元素的“变换原点”属性。此属性的默认值为“中心”两个轴。但我们需要从左上角开始转换

img#smallA {

    transform-origin: left top;
    position: absolute;

}