Question

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

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

上面显示3张图像，大小不同。尺寸可以改变。

我希望图像调整大小以垂直填充列（无需水平填充），并获得相同的宽度。（对于＆＃34;列＆＃34;看起来）

我发现了一个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>

对于完成，几个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;
}

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

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

1 个答案: