使用CSS转换进行比例大小调整和spcing

Question

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

当然，如果我可以为每个布局做一个带有专用样式的HTML布局，我会没事的。 I could do it like I have it here in this pen.有三个盒子，两个较小的盒子和一个较大的盒子，是小盒子的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值。 But here’s the pen where I’ve tried to do it.单击较大的框以运行sizeAndPos（）函数。现在，如果您将窗口宽度调整为1000像素（在CodePen屏幕的中心观看小小的Gizmo），这个JS / transform方法可以完美地工作，布局看起来就像另一个。但如果你拉伸它，间距立即开始消失。 （请记住在调整大小后单击较大的框）。我认为它工作在1000像素宽的原因是在窗口宽度的b / c，盒子是它们的自然宽度。但我不明白为什么它只适用于那种情况。

现在间距已经消失;间隙框2和3之间的距离太大。

对于任何人如何查看代码，您可能想知道为什么我将每个图像的原始宽度（origWidth）传递给函数。这是因为CSS缩放变换功能会根据图像的原始尺寸调整图像大小（将图像缩放为1会使您获得原始大小的100％）。因此，为了做一个比例大小，你首先要弄清楚盒子的宽度应该是多少（屏幕宽度的10％或30％，具体取决于盒子）。然后你必须将该数量除以原始大小，以获得适当的比例来进行缩放。小盒子宽100像素，大盒子宽300像素。

当然，这可以通过变换实现。我已经尝试单独设置转换属性，以控制操作的顺序，但它没有帮助。谁能告诉我为什么这不起作用？

Answer 1

在试图让这种方式过于复杂之后，我找到了答案。更改元素的transform-origin属性。此属性的默认值是“中心”两个轴。但是我们需要我们的转换来自左上角。

img#smallA {

    transform-origin: left top;
    position: absolute;

}