Panzoom не работает, когда контейнер имеет фиксированную ширину

Я использую jquery.panzoom в режиме "содержать" для отображения div с фоновым изображением.

Это прекрасно работает, когда родительский контейнер не имеет определенной ширины (или 100%). Тем не менее, макет требует фиксированной ширины (скажем, "720px").

Когда я использую контейнеры фиксированной ширины, позиционирование и размеры больше не работают.

HTML

<div class="plan_wrapper" style="width:720px;position:relative; overflow: hidden; ">
  <div id="main_content" style="position:relative; overflow: hidden; text-align: center;">
  <div class="mapbox" style="width:auto;height:1180px; background: url('image.jpg') no-repeat left top; "></div> 
  </div>
</div>

и JS

$('.mapbox').panzoom({
  $zoomIn: $(".zoom-in"),
  $zoomOut: $(".zoom-out"),
  increment: 0.5,
  minScale: 0.5,
  maxScale: 3,
  contain: true
}).panzoom('zoom', true);

где бы я ни указывал ширину: либо div обрезается, либо ломается позиционирование...

0 ответов

Другие вопросы по тегам