jQuery Panzoom 包含：在具有固定宽度的容器内“反转”

Posted 2023-05-07

【中文标题】jQuery Panzoom 包含：在具有固定宽度的容器内“反转”

【英文标题】：jQuery Panzoom with contain: 'invert' inside a container with a fixed width

【发布时间】：2016-03-07 20:25:06

【问题描述】：

我正在尝试使用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

【问题讨论】：

嗨，我也有同样的问题。你找到解决办法了吗？谢谢

@Jeff，不，还没有 =(

【参考方案1】：

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

CSS 文件

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

【讨论】：

这是正确的。您当前将“可平移”空间的宽度和高度设置为100%。添加实际图像尺寸（大于父级）将允许您滚动父级范围内的“可平移”区域。