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

Question

我整理了我正在处理的一个小图像缩放脚本的这个简化版本。

https://jsfiddle.net/cvanderlinden/jjrhgxvv/4/

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>

JS(jQuery):

$('.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);
    }
);

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

Answer 1

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

img { max-width: 100%; }

你的 fiddle ，你会得到同样的效果。所以你需要检查你的样式表是否存在类似的规则。这是一个 fiddle 演示 issue