javascript - 找到 3 个(或 x 个)图像的共同高度，它们的宽度等于容器元素的设置宽度

Question

类似于 Flickr 的照片布局 ( https://www.flickr.com/search/?text=iceland%20westfjords ) 我试图找到任何给定的 common 高度，为了简单起见，一个容器行中的 3 张照片必须符合它们的顺序以保持它们的纵横比并准确填充固定宽度。所有图像都可以增长到一个共同的高度，因此当它们的宽度加在一起时正好等于所需的数量。

我实现这一点的一个简单方法就是猜测并在浏览器中检查。使用一位小数增加图像的样式高度，例如 416.6px。浏览器为每个图像计算出正确的宽度而不扭曲它们并最终适合容器的宽度 (1200px)。

但我的问题是我有数千张长宽比不一致的图像以及每组 3 张图像的组合，否则我只会使用 css 设置 3 张照片组合(9 种样式)的高度。

所以我认为我需要做的是在 Javascript 中我需要测试 3 张照片，找到它们的宽高比(我将每张照片的原始尺寸作为来自 API 的数据)，并找到给定 clientWidth 的共同高度他们共享的容器行。我需要为每一行(一组 3 张图像)执行此操作。

到目前为止，我想出的最佳解决方案是采用每张照片的原始尺寸，将高度乘以宽度以获得纵横比。然后猜测所有照片的共同高度，比如 500.5 像素，然后将其除以每张照片的纵横比以获得每张照片的新宽度。然后将宽度相加以查看它们是否总计容器宽度，比如 1200 像素。但这似乎我需要进行某种二进制搜索才能快速找到共同的高度。

谁能想到一个更好的算法，可以直接解决 3 张照片的共同高度，给定它们的纵横比，它们需要是为了准确填充固定宽度？高度没有限制。

谢谢!

Answer 1

给定原始高度 h 和原始宽度 w 的图像，给定高度 h* 的结果宽度 w* (保持宽高比)是:

w* = w/h * h*

这里，w/h 是图片的纵横比。然后，这只是求解方程式的问题:

w_total = w1* + w2* + w3*
        = (aspect1 + aspect2 + aspect3) * h*

你得到了所有图像的最佳高度:

h* = w_total / (aspect1 + aspect2 + aspect3)