Question

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

当图像比较高时，它工作正常。但是，当图像较高时，整个高度不会显示在容器中。

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

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

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

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

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

除了图像不居中外，这是有效的。视口和图像的数学运算不太正确。

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

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

Answer 2

我认为，你想要拉伸你的图像以获得整个div。如果，我是对的，那么你可以用css做到这一点。只需将宽度和高度设置为100％即可。将此课程添加到您的CSS中。

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

JSFiddle：http://jsfiddle.net/wmx05cty/4/

/ **已编辑内容** /

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

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

JSFiddle：http://jsfiddle.net/wmx05cty/6/

希望，这有帮助。

Answer 3

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

http://jsfiddle.net/wmx05cty/7/

css：

    img {
    max-width:100%;
    max-height:100%;
    margin:auto auto;

}

如何使用Jquery ImgViewer插件使Max Width和Height工作

3 个答案: