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

Question

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

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

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

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

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

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

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

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

计算 3 个图像占其容器 100% 宽度时的总高度。
计算我们必须将总高度减少多少百分比才能使其适合容器高度。
按照这个百分比缩小每张图片的大小。

但我满心疑惑...

也许有一个 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>

最后，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;
}

我知道它远非完美，但如果它能有所帮助的话:)

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

jquery multiple img filling fixed height container with same width

jquery

image

image-resizing