我正在尝试使用 jQuery.panzoom.js 。我所拥有的只是一个固定宽度的容器(可能小于其中的 svg)。问题是,如果 svg 大于容器的宽度,您将无法看到整个容器(即使您尝试“平移它”)。
HTML:
<div class="container">
<div id="parent">
<div class="panzoom">
<img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
</div>
</div>
</div>
CSS:
.container {
width: 600px;
margin: 0 auto;
border: 1px solid red;
}
#parent {
border: 1px solid black;
}
.panzoom { width: 100%; height: 100%; }
以及 javascript(如该插件的演示中提供的):
(function() {
var $section = $('#parent');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(1.1)',
increment: 0.1,
minScale: 1,
contain: 'invert'
}).panzoom('zoom');
})();
这是一个有效的演示,重现了问题:http://codepen.io/FakeHeal/pen/WreLyZ
最佳答案
您必须将 .panzoom 类的尺寸设置为与图像大小相同。所以我希望你的图像尺寸为 600px,高度为 900px,使用这个 css 部分
CSS 文件
.panzoom {
width: 600px;
height: 900px;
}
关于javascript - jQuery Panzoom 包含 : 'invert' inside a container with a fixed width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34062333/