缩放图像组以适合父宽度/高度答案

【问题标题】：Scale group of images to fit parent width/height缩放图像组以适合父宽度/高度
【发布时间】：2013-11-05 23:02:14
【问题描述】：

我有一个包含不同大小图像的 div，它位于父容器内。

<div id="parentContainer">
<div id="boxToScale">
    <img src="http://placehold.it/350x150" />
    <img src="http://placehold.it/150x350" />
    <img src="http://placehold.it/200x200" />
    <img src="http://placehold.it/50x200" />
</div>
</div>

我需要缩放#boxToScale，使其适合#parentContainer（宽度和高度），而其中的所有图像都保持其纵横比。所有图像都应以相同的比例缩放，并保持在同一行。

这是一个显示设置的 jsfiddle：http://jsfiddle.net/32sm4/

我发现很多东西可以按比例缩放单个图像，但不能按比例缩放一组图像。我事先不知道图片的大小，只知道#parentContainer的大小。

Javascript/jquery 解决方案如果不能仅使用 css 就可以。谢谢！

编辑：这是（大致）我希望它在 #boxToScale 被缩放后的样子：

【问题讨论】：

这就是你想要的吗？ jsfiddle.net/7dpHK/2不确定其他布局参数，例如将顶部设置为垂直居中图像。
@charlietfl "所有图像都应该以相同的比例缩放，并保持在同一行。"那不是那样的。所有图像都应按高度和宽度调整大小。
需要更明确的缩放定义。他们在 FF 中对我来说保持在同一条线上，而不是 100% 清楚你的期望是什么。没有人能比别人高？据我所知，目前正在保持纵横比
显示您想要的内容的好方法是手动设置图像尺寸/位置以显示您期望的输出或提供预期布局的图像
@charlietfl 我添加了一张显示我想要的图片。不过你是对的，我应该更明确地定义预期的布局。

标签： javascript jquery html css

【解决方案1】：

在看到你的照片后更新了我的答案。

这是基于jsfiddle.net/7dpHK/2（charlietfl 对您的问题发表了评论）。它几乎像你想要的那样工作，但由于图像周围的 4px 边框/填充，它出现了问题。也有一些令人困惑的 CSS。所以你必须像这样计算你的边界：

var border = $("#boxToScale img").length * 4;

然后从parentW中减去它：

parentW = $box.width() - border

Working example.

JS：

var border = $("#boxToScale img").length * 4; // 4px padding around every image
var $box = $('#boxToScale'),
    parentW = $box.width() - border,
    parentH = $box.height(),
    imageTotalW = 0,
    imageTotalH = 0,
    $imgs = $box.children();

$imgs.each(function () {
    var img = $(this),
        ht = img.height(),
        w = img.outerWidth()

    imageTotalW += w;
    img.data('w', w);

});

var img_width_ratio = parentW / imageTotalW;
$imgs.each(function (idx) {
    var $this = $(this),
        $prev = $this.prev();
    $this.width($this.outerWidth() * img_width_ratio);
});

~~DEMO~~

JS：

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
    var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ];
    ratio = Math.min(ratio[0], ratio[1]);

    return { width:srcWidth*ratio, height:srcHeight*ratio };
}

imagesInContainer = $("#boxToScale img").length;

var toWidth = $("#parentContainer").width() / imagesInContainer;
var toHeight = $("#parentContainer").height() / imagesInContainer;

$("#boxToScale img").each(function(){
    var imageWidth = $(this).width();
    var imageHeight = $(this).height();
    var getRatio = calculateAspectRatioFit(imageWidth, imageHeight, toWidth, toHeight);
    $(this).width(getRatio.width);
    $(this).height(getRatio.height);
});

注意：图片中的 1px 边框可能会导致此代码出错。查看示例here 无边界。

【讨论】：

仅供参考 - 如果想要元素总数可以使用 $('selector').length 而无需创建 each 循环
实际上：看起来 (jsfiddle.net/tU6yS/1) 图像的缩放比例不同。在该链接中，第一个图像的缩放比例是第二个图像的两倍。我希望它们都以相同的因子进行缩放。（所以 2000x2000 的图像在缩放后仍然是 1000x1000 图像的两倍。）
@penguinrob 是的，我第一次理解错了你的问题。查看更新的答案。

【解决方案2】：

#boxToScale {
border: solid blue 1px;
white-space: nowrap;
}

#boxToScale img {
 width:20%;
 height:auto;
 display:inline-block;
 }

疯狂..但可能有效...希望对您有所帮助。

【讨论】：

might work 几乎不是答案....在这种情况下绝对不会。应该通过演示证明您的解决方案