Javascript 简单jQuery图像缩放-溢出超大浏览器窗口

我把我正在编写的一个小图像缩放脚本的简化版本放在一起

HTML:

<div class="image-zoom">
  <div class="zoom--actions">
    <a href="#" class="zoom-in">Zoom In</a>
    <a href="#" class="zoom-out">Zoom In</a>
  </div>
  <div class="zoom--img">
    <img src="https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
</div>

$('.zoom--actions .zoom-in').on('click', function () {
        var img = $(this).parents('.image-zoom').find('.zoom--img img');
        var width = img.width();
        var newWidth = width + 100;
        img.width(newWidth);
    }
);
$('.zoom--actions .zoom-out').on('click', function () {
        var img = $(this).parents('.image-zoom').find('.zoom--img img');
        var width = img.width();
        var newWidth = width - 100;
        img.width(newWidth);
    }
);

---

它按预期工作，我发现的唯一问题是，它似乎只想缩放，直到达到窗口宽度，此时它停止。在JSFIDLE上这似乎无关紧要，但在真正的浏览器中，它会停止。如何允许图像超过浏览器窗口宽度，并隐藏滚动，让溢出发生。

简单的css会起作用：

body{overflow-x:visible；}

一些css规则似乎限制了图像的放大。 如果添加样式：

img { max-width: 100%; }

对你来说，你会得到同样的效果。 因此，您需要检查样式表中是否存在类似的规则。

---

这是一个提琴演示

我对html不熟悉，所以我不是最好的，但是试试这段代码吧！打开ID和源链接，我正在使用Pikachu卡图像作为测试

#皮卡丘卡{
边框：3倍纯黑；
}
#皮卡丘牌：悬停{
宽度：400px；
高度：546px；
边框：6px纯黑；
}
试验
悬停缩放

这是我的第一个猜测，但似乎没有任何作用。在主体和父元素上尝试了它。仍然停留在窗口宽度。编辑了我的答案，之前我不理解你的问题。不幸的是，同样的结果。似乎一些css规则限制了图像放大。如果您将样式：

img{max width:100%；}

添加到小提琴中，您将获得相同的效果。所以你需要检查你的样式表或者在这里提供它。谢谢班扎！就这样！把它移到了答案。这并没有回答问题。