javascript - 使用 CSS 变换来按比例调整大小和间距

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 屏幕中央的小玩意儿)，这种 JS/转换方法可以完美运行，并且布局看起来与另一种类似。但如果你拉伸(stretch)它，间距就会立即开始缩小。 (调整大小后记得单击较大的框)。我认为它在 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;

}