javascript - 使元素在 css 缩放后表现相同

Question

我一直在用 javascript 处理 div。

有时我需要让那些 div 适合大小不断变化的容器。

实现这一点的一种方法是使用 css 缩放。缩放的问题在于它只是缩小了元素的图片。系统继续以相同的方式查看元素。所以所有位置等都变得倾斜。例如，如果我将 div 定位为 top:0%，那么如果元素已按比例缩小，它不会变为 0%，而是略低于 0%，因为系统认为 div 比其视觉显示的要大。

这种行为变化会导致很多复杂情况，因为系统现在对根本不成立的元素做出假设。这是糟糕的编程。

我查看了“缩放”，但文章警告不要使用它。

有没有什么方法可以扩展元素并让系统及时了解实际发生的事情？

Answer 1

默认的 transform-origin 是 50% 50%(元素的中间)，所以当你用 scale 缩小元素的大小时，边缘是从四面八方向中间“缩回”。

所以左上角似乎向下和向右移动。但是，如果您将 transform-origin 设置为 0% 0%(左上角)，则只有右侧和底部移动。

希望这对您有所帮助!