jquery多个img填充具有相同宽度的固定高度容器

Question

我确信这个问题很容易解决，但经过几个小时的搜索，我终于在这里发帖寻求帮助。

我有一个固定高度和宽度的容器，让我们考虑一个大列。

上面显示了 3 张图片，大小不同。大小可以改变。

我希望调整图像大小以垂直填充列（无需水平填充），并获得相同的宽度。 （对于“列”外观）

我找到了一个横向执行此操作的 jquery 插件解决方案：jpictura。 它拍摄 3 张图片，并以相同的高度尽可能大地显示它们，以便准确地填充行。

但现在我搜索的是相同的，但搜索的是垂直而不是水平。

让我们想象一个高度为 1000 像素，最大宽度为 800 像素的容器。 并在其上显示 3 张图像： img1 : 800 像素 * 1600 像素 img2 : 300px * 800px, img3 : 1800px * 1600px

我的逻辑会告诉我遵循这些步骤（在 jquery 中）：

1. 计算 3 个图像的总高度，当它们是容器的 100% 宽度时。

2. 计算我们必须减少多少百分比才能使其适合容器高度的总高度。

3. 根据此百分比减小每个图像的大小。

但我满怀疑惑……

也许有一个 jquery 插件可以以一种干净稳定的方式执行此操作。但是只有我找不到吗？ 或者最坏的！我找到它并尝试了它，但无法使用它的好方法.. ^^

有什么想法吗？

谢谢

[edit]这里有一些例子来展示我想做的事情。图片占容器的 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>

对于finish，很少有css规则，用于列和行显示：

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

我知道它远非完美，但如果它可以帮助:)