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

How can one get a correct jQuery offset() for a an img that is has css zoom applied to it in Chrome

本文关键字：img jQuery offset 缩放 Chrome css 应用      更新时间：2023-09-26

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

我

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

如果您单击显示青蛙偏移按钮，它将为青蛙 img 的 offset（）.left 显示值 219，然后如果您按下缩放按钮，则 from 将缩放 2.0。如果您再次按下显示青蛙偏移按钮，您将看到青蛙 img 的 offset（）.left 为 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);
});

这似乎工作正常。使用缩放样式属性时，它会增大/减小应用该属性的元素的大小。因此，当考虑 offset（） 返回相对于文档的位置时，此图像会缩放到 2 的设置，使其大小加倍，作为回报，将其 offset（） 切成两半。 文档大小没有变化，但图像会改变。我认为这就是你正在稀释的问题吗？ 希望对您有所帮助！祝您编码愉快！

相关文章：