找到 3 个（或 x 个）图像的共同高度，它们的宽度等于容器元素的设置宽度答案

【问题标题】：Find the common height for 3 (or x number) images that their widths equal the set width of container element找到 3 个（或 x 个）图像的共同高度，它们的宽度等于容器元素的设置宽度
【发布时间】：2015-10-19 14:56:28
【问题描述】：

与 Flickr 的照片布局 (https://www.flickr.com/search/?text=iceland%20westfjords) 类似保持它们的纵横比并准确填充固定宽度。所有图像都可以增长到一个共同的高度，这样当它们的宽度相加时，就等于一个确切的期望值。

我实现这一目标的一个简单方法就是在浏览器中进行猜测和检查。使用小数点后一位增加图像的样式高度，例如 416.6px。浏览器为每个图像计算了正确的宽度，没有扭曲它们，最终适合容器的宽度（1200px）。

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

所以我认为我需要做的是在 Javascript 中我需要测试 3 张照片，找到它们的纵横比（我将每张照片的原始尺寸作为 API 的数据），并在给定 clientWidth 的情况下找到共同高度他们共享的容器行。我需要为每一行（3 个图像集）执行此操作。

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

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

谢谢！

【问题讨论】：

标签： javascript html css math

【解决方案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)

【讨论】：