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

Question

我一直在用 javascript 操纵 divs。

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

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

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

我查看了 'zoom'，但文章警告不要使用它。

有什么方法可以缩放元素并让系统根据实际情况进行更新吗？

Answer 1

默认的 transform-origin 是 50% 50%（元素的中间），所以当你用 scale 缩小一个元素的大小时，边缘是 "retracted" 从所有两侧朝向中间。

因此左上角似乎向右下方移动。但是，如果将变换原点设置为 0% 0%（左上角），则只有右侧和底部移动。

希望对您有所帮助！