javascript - 如何使最大宽度和高度与 Jquery ImgViewer 插件一起使用

Question

我正在使用 ImgViewer v.6 来缩放图像(支持 IE8)。

当图像宽度大于高度时效果很好。但是，当图像较高时，整个高度不会显示在容器中。

http://jsfiddle.net/TheFiddler/wmx05cty/

在这个 fiddle 中，您可以看到顶部图像的部分高度被剪掉了。

我需要在不拉伸(stretch)图像的情况下用尽可能多的图像填充视口(viewport)。图像需要保持比例。宽度应为 100%，高图像的高度也应适合视口(viewport)高度。高图像需要水平居中，并且其整个宽度和高度最初可见。

因此，我修改了插件以检测高度，如果更高，则将高度设置为视口(viewport)的高度。

  if (height > width) {
        var ratio = $view.height() / height;
        ih = $view.height();
        iw = width * ratio;  
  }

除了图像不居中外，此方法有效。视口(viewport)和图像上的数学不太正确。

http://jsfiddle.net/TheFiddler/qontbr9e/

我需要一种方法使两个图像在容器中居中，显示整个宽度以填充容器，如果图像较高，则调整其大小以使其高度适合初始化时的容器。

这是一个动态应用程序，所以我无法将样式应用于单个图像。相同的脚本需要使用相同的 css 在两个图像上工作。我必须使用 v.6 版本。

Answer 1

已编辑:整理了答案。

所以，这个解决方案有点乱，但它有效:

Fiddle for centered only on x

Fiddle for centered on both x and y

在小部件构造函数中:

this.$oldview = $img.parent(); //store original container element

然后在更新方法中:

$(this.view).position({
                    my: "left top",
                    at: "left top",
                    of: this.$oldview
                });

这会将视口(viewport)移回原位(出于某种原因，您添加的代码会使视口(viewport)变为绝对 (0,0))。

在更新结束时，我向 zLeft 添加了一个偏移量。

var offsetx = //offset need to horizontally center image
    (this.$oldview.width() / 2) -
    (((this.zimg).width() / 2) / zoom);

$(this.zimg).css({ //center image
    left: zLeft + offsetx + "px"
});

这是在更新开始时因为它在一直缩小时行为不端:

if (zoom < 1) {
    this.options.zoom = 1;
    zoom = 1;
}

我还删除了 text-align:center。我认为这就是我所做的所有更改。

如果你希望它也垂直居中，同样的事情:http://jsfiddle.net/qontbr9e/10/同样的事情，但对于 x 和 y:

var offsetx = //offset need to horizontally center image
    this.$oldview.width() / 2 -
    (this.zimg).width() / 2 / zoom;
var offsety = //offset need to vertically center image
    this.$oldview.height() / 2 -
    (this.zimg).height() / 2 / zoom;

$(this.zimg).css({ //center image
    left: zLeft + offsetx + "px",
    top: zTop + offsety + "px"
});