jQuery Panzoom插件定位图像右侧包含：’invert’

我正在尝试使用jQuery Panzoom插件，除了……

我希望最初缩放大图像以适合容器，并且contain: 'invert'启用。 我已经调整了这个例子来在第一次加载时缩放和定位图像。

这很好，图像位于（窗口大小）容器的中心。 但是如果我使用contains contain: 'invert'作为Panzoom选项，则图像位于右侧。 我无法理解为什么。

你可以在这里看到它： https ： //jsfiddle.net/7ugm9z51/2/

这是HTML / CSS：

 .zoom-container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } 
   

和JavaScript：

 $('.zoom-img').panzoom({ // Causes image to appear aligned right: contain: 'invert', }); // Get container dimensions var container_height = $('.zoom-container').height(); var container_width = $('.zoom-container').width(); // Get image dimensions var image_height = $('.zoom-img').height(); var image_width = $('.zoom-img').width(); // Calculate the center of image since origin is at x:50% y:50% var image_center_left = image_width / 2.0; var image_center_top = image_height / 2.0; // Calculate scaling factor var zoom_factor; // Check to determine whether to stretch along width or height if(image_height > image_width) { zoom_factor = container_height / image_height; } else { zoom_factor = container_width / image_width; }; // Zoom by zoom_factor $('.zoom-img').panzoom('option', 'minScale', zoom_factor); $('.zoom-img').panzoom('zoom', zoom_factor, {animate: false}); // Calculate new image dimensions after zoom image_width = image_width * zoom_factor; image_height = image_height * zoom_factor; // Calculate offset of the image after zoom var image_offset_left = image_center_left - (image_width / 2.0); var image_offset_top = image_center_top - (image_height / 2.0); // Calculate desired offset for image var new_offset_left = (container_width - image_width) / 2.0; var new_offset_top = (container_height - image_height) / 2.0; // Pan to set desired offset for image var pan_left = new_offset_left - image_offset_left; var pan_top = new_offset_top - image_offset_top; $('.zoom-img').panzoom('pan', pan_left, pan_top);