Javascript 如何使用Jquery ImgViewer插件实现最大宽度和高度

我正在使用ImgViewer v.6来缩放图像（支持IE8）

当图像的宽度大于高度时，它可以正常工作。但是，当图像较高时，整个高度不会显示在容器中

在这把小提琴中，你可以看到顶部图像的一些高度被剪掉了

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

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

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

除图像未居中外，此操作有效。视口和图像的数学计算不太正确

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

---

这是一个动态应用程序，因此我无法将样式应用于单个图像。相同的脚本需要使用相同的css处理两个图像。我必须使用v.6版本。

我认为，您需要拉伸图像以拍摄整个div。如果，我是正确的，那么你可以用css来做这件事。只需将宽度和高度设置为100%。 将这个类添加到css中

img {
    width:100%;
    height:100%;   
}

JSFiddle：

/**编辑内容**/

如果您只想拉伸（调整）图像以适合div（大于div高度或宽度），请使用此css

img {
    max-width:100% ;
    max-height:100%;   
}

JSFiddle：

---

希望有帮助。

您需要最大宽度最大高度和自动边距

css:

---

已编辑：已清理答案

因此，这个解决方案有点混乱，但它可以工作：

在小部件构造函数中：

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

然后在更新方法中：

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

这会将视口移回原位（由于某些原因，您添加的代码使视口变为绝对（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;
}

---

它还拉伸了正确显示的另一个，图像需要成比例。没有伸展。我对问题进行了编辑，以使其更清楚。6中的缩放效果也不起作用。我相信唯一能得到我想要的东西的方法就是修改JS。缩放效果不起作用。尝试用鼠标滚轮滚动。此外，图像需要成比例，而不是拉伸。

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

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"
});