如何使最大宽度和高度使用jQuery ImgViewer插件

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，比格高度更大或宽度，然后使用此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; 

}