如何使最大寬度和高度使用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; 

}