如何使最大宽度和高度与Jquery ImgViewer插件一起工作

How to make Max Width and Height work with Jquery ImgViewer Plugin

本文关键字：ImgViewer Jquery 插件 一起 工作 高度 何使最      更新时间：2023-09-26

我正在使用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/

我需要一种方法来将两个图像放在它们的容器中居中，显示整个宽度，使其填充容器，如果它是一个更高的图像，则调整其大小，使其高度适合init上的容器。

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

编辑：清理答案。

因此，这个解决方案有点混乱，但它有效：

仅在x 上居中的Fiddle

以x和y 为中心的Fiddle

在小部件构造函数中：

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

我认为，您需要扩展您的图像以使用整个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/

希望，它有帮助。

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

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

css：

    img {
    max-width:100%;
    max-height:100%;
    margin:auto auto;
}
相关文章：