Question

我试图使用jQuery.panzoom.js。我所拥有的只是一个具有固定宽度的容器（可能小于其中的svg ）。问题是，如果svg大于容器的宽度，你就看不到它的全部（即使你试图＆＃34;平移它＆＃34;）。

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

Answer 1

您必须将.panzoom类的尺寸设置为与图像相同的尺寸。所以我希望你的图像是600px in并且高度为900px使用这个css部分

CSS-文件

.panzoom { 
   width: 600px; 
   height: 900px; 
}

jQuery Panzoom包含：＆＃39; invert＆＃39;在具有固定宽度

1 个答案: