【问题标题】:Make element behave same after css scaling在 css 缩放后使元素行为相同
【发布时间】:2015-06-16 02:15:18
【问题描述】:

我一直在用 javascript 操作 div。

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

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

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

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

有没有办法缩放元素并让系统随时了解实际情况?

【问题讨论】:

  • 您只是忽略了transform-origin 还是比这更复杂?
  • 可能是。我正在阅读有关此 transform-origin 的信息,发现它很混乱。但是在 div 上将其设置为“0% 0%”似乎暂时可以解决问题。你知道任何关于它的好链接吗?你能用几句话向我解释一下吗?到时候我们就可以这样回答了。
  • 嗯,我一直在看链接,但他们都试图一次解释整个transform,我可以理解他们都有点复杂。我的简单化的图画是否让事情变得更清晰了一些?

标签: javascript html css zooming scale


【解决方案1】:

默认的变换原点是50% 50%(元素的中间),所以当你用scale减小元素的大小时,边缘会从四面八方向中间“缩回”。

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

希望这会有所帮助!

【讨论】:

    猜你喜欢
    • 2020-06-08
    • 2018-09-01
    • 2015-01-19
    • 2013-10-01
    • 2017-08-07
    • 2020-11-03
    • 2021-10-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多