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

我知道这是远离是完美的，但如果它可以帮助:)