javascript - 如何为在 Chrome 中应用了 css 缩放的 img 获得正确的 jQuery offset()

Question

我正在尝试在 img 上应用 css 缩放效果，当我执行 jQuery 函数 offset() 时似乎返回了错误的值。

我创建了一个小jsFiddle 示例来说明我遇到的问题。请在 Chrome 中检查一下，因为那是我遇到此问题的浏览器（我不认为

如果您单击显示青蛙偏移按钮，它将显示青蛙 img 的 offset().left 的值为 219，然后如果您按缩放按钮，则 from 将缩放 2.0。如果您再次按下 show frog offset 按钮，您将看到青蛙 img 的 offset().left of 101.5。

这是我在我的jsFiddle 示例中用来缩放和取消缩放青蛙的 img 的代码（上面也有链接）

$("#zoom-frog-button").click(function() {
    $(".frog-img").css("zoom", 2.0);
});

$("#unzoom-frog-button").click(function() {
    $(".frog-img").css("zoom", 1.0);
});

Answer 1

这似乎工作正常。当您使用缩放样式属性时，它会增加/减少您应用它的元素的大小。因此，当考虑 offset() 返回相对于文档的位置时，此图像会以 2 的设置进行缩放，使其大小翻倍，作为回报，将其 offset() 减半。文档大小没有变化，但图像是。我想这是你瘦身的问题吗？希望对您有所帮助！快乐编码！