jQuery的多個img填充固定高度的容器相同的寬度

Question

我確信這個問題很容易解決，但經過幾個小時的搜索，我finaly發佈在這裏找到一些幫助。

我有一個固定的高度和寬度的容器，讓我們考慮爲一個大的列。

有3個圖像顯示在其上，diferents大小。大小可以改變。

我想調整大小的圖像垂直填充列（無需水平填充），並獲得所有相同的寬度。 （對於「列」的樣子）

我發現一個jquery插件解決方案爲水平做這件事：jpictura。 它需要3張圖片，並將其顯示爲儘可能大，高度相同，以便填充該行。

但現在我正在尋找相同的，但爲垂直而不是水平。

讓我們來想象一個1000px高度和800px最大寬度的容器。 而3圖像在其上顯示： IMG1：800像素* 1600像素 IMG2：300像素* 800像素， IMG3：1800px * 1600像素

我的邏輯會說我按照這些步驟（jQuery中）：

1. 計算3個圖像100％寬度時的總高度。

2. 計算多少淨度我們必須降低它適合容器高度的總高度。

3. 根據這個濃度降低每個圖像的大小。

但我充滿了疑問......

，也許jQuery插件存在一個乾淨，穩定的方式這樣做。但是，只有我無法找到它？ 或最差！我找到它並嘗試它，但無法使用它的好方法。^^

任何想法？

感謝

[編輯]下面是一些exemples顯示我想要做什麼。這些圖像佔據了容器高度的100％，它們都具有相同的寬度，沒有鬆動比例。

Answer 1

我終於寫了一個小腳本，不用這麼辛苦終於:)

我猜的功能，可以優化，我不是jQuery的專家... 無論如何，它爲我完成這項工作：拍攝所有圖像，給它們相同的寬度，並使它們適合列的總高度。 精確度：在我的情況下，我用它在PDF上顯示精美的照片，所以我獲得了與我的A4 PDF內容相對應的固定寬度和高度值。 它可以處理任何數量的圖像，您嘗試顯示。

JS：

function setImagesToFillAColumn() { 
    var maxWidth = 735; 
    var totalHeight = 0; 
    var availableHeight = 980; 

    //set all images to this max width and calculate total height 
    $('.pdf-a-column-images-container > img').each(function(){ 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     var ratio = height/width; 
     var newHeight = maxWidth * ratio; 
     $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes 
     $(this).css("height", newHeight+'px').css("width", maxWidth+'px'); // change css attributes 
     totalHeight = totalHeight + newHeight; 
    }); 

    //calculate the reduction purcentage neddded for all the images fit to the row 
    var purcentageReduction = availableHeight/totalHeight; 

    if (purcentageReduction < 1) { 
     //reduce to this purcentage for all image size 
     $('.pdf-a-column-images-container > img').each(function(){ 
      var finalHeight = $(this).height() * purcentageReduction; 
      var finalWidth = $(this).width() * purcentageReduction; 
      $(this).css("height", finalHeight+'px').css("width", finalWidth+'px'); // change css attributes 
     }); 
    } 
} 

和HTML，很簡單：

<div class="pdf-a-column-images-container"> 
    <img src="urltoimg1" /> 
    <img src="urltoimg2" /> 
    <img src="urltoimg3" /> 
    <img src="urltoimg4" /> 
</div> 

在另一個應用中，我做了同樣的功能，但在行（水平）適合的圖像，而不是列。 它顯示我在單行中給出的圖像，具有相同的高度，佔行數的100％。

JS：

function setImagesToFillARow() { 
    var maxHeight = null; 
    var totalWidth = 0; 
    var availableWidth = 735; 
    //get the less high image height 
    $('.pdf-a-row-images-container > img').each(function(){ 
     if (maxHeight === null || $(this).height() < maxHeight) { 
      maxHeight = $(this).height(); 
     } 
    }); 

    //set all images to this height and calculate total width 
    $('.pdf-a-row-images-container > img').each(function(){ 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     var ratio = height/width; 
     var newWidth = maxHeight/ratio; 
     $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes 
     $(this).css("width", newWidth+'px').css("height", maxHeight+'px'); // change css attributes 
     totalWidth = totalWidth + newWidth; 
    }); 

    //calculate the reduction purcentage neddded for all the images fit to the row 
    var purcentageReduction = availableWidth/totalWidth; 
    var finalHeight = maxHeight * purcentageReduction; 
    //set images container to the new height 
    $('.pdf-a-row-images-container').css('height', finalHeight+'px'); 

    //reduce to this purcentage all image size 
    $('.pdf-a-row-images-container > img').each(function(){ 
     var finalWidth = $(this).width() * purcentageReduction; 
     $(this).css("width", finalWidth+'px').css("height", finalHeight+'px'); // change css attributes 
    }); 
} 

和HTML：

<div class="pdf-a-row-images-container"> 
    <img src="urltoimg1" /> 
    <img src="urltoimg2" /> 
    <img src="urltoimg3" /> 
    <img src="urltoimg4" /> 
</div> 

而對於完成，fewcss規則，用於列和行顯示：

.pdf-a-row-images-container { 
    white-space: nowrap; 
    line-height: 0; 
    font-size: 3px; 
} 
.pdf-a-column-images-container { 
    white-space: nowrap; 
    line-height: 1px; 
    padding-top: 25px; 
} 
.pdf-a-column-images-container img { 
    display: block; 
    margin: 1px auto; 
    padding: 0; 
} 

我知道這是遠離是完美的，但如果它可以幫助:)