Question

我把这个简化版的小图像缩放脚本放在一起工作。

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

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Form Test</title>
</head>
<body>
    <form id="form1" method="post" action="">
        <label><input type="checkbox" name="color1" value="1" required />Green</label><br />
        <label><input type="checkbox" name="color2" value="2" required />Red</label><br />
        <label><input type="checkbox" name="color3" value="3" required />Yellow</label><br />
        <label><input type="checkbox" name="color4" value="4" required />Blue</label><br />
        <input type="submit" /><input type="reset" />
    </form>
</body>
</html>

JS（jQuery）：

<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>

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

Answer 1

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

img { max-width: 100%; }

对你的小提琴，你会得到同样的效果。因此，您需要检查样式表是否存在类似的规则。这是一个小提琴演示issue

Answer 2

简单的css可以解决问题：body{overflow-x: visible;}

Answer 3

我是html的新手，所以我不是最好的，但请尝试使用此代码！切换ID和源链接，我使用皮卡丘卡图像作为测试！

＆＃13;

<!DOCTYPEhtml>
<html>
<head>
<style>
#pikachu-card {
border: 3px solid black;
}

#pikachu-card:hover {
width: 400px;
height: 546px;
border: 6px solid black;
}
</style>
<title>
Test
</title>
</head>
<body>
<h1>Hover to zoom</h1>
<img src="http://cdn.bulbagarden.net/upload/thumb/7/78/PikachuBaseSet58.png/200px-PikachuBaseSet58.png" id="pikachu-card">
</body>
</html>

＆＃13;

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

3 个答案: