javascript - 根据最小值和高度值将图像放入框中

Question

标题可能不是最好的，但让我解释一下。我的最小高度值为50px，最大值为612px。然后我有大量的图像必须放在一个高度为800px和动态宽度的盒子里。

诀窍是每个图像都有一个值，我们可以称之为likes。我想要做的是，“喜欢”最多的图像应该得到 612px 的大小，而“喜欢”最少的图像应该得到 50px 的高度。其余图像的大小应根据其“喜欢”的数量与最小值和最大值相对应。所有图像均为正方形。

我不能把数学放在一起。希望大家能帮忙:)

示例 HTML：

<div class="container">
  <article class="item" data-likes="500"><img src="foo.jpg"></article>
  <article class="item" data-likes="100"><img src="bar.jpg"></article>
  <article class="item" data-likes="350"><img src="baz.jpg"></article>
</div>

Answer 1

试试这个（假设所有图像源文件都612 x 612放在首位......）：

img_size = 50 + Math.round( (612-50)*((img_likes-min_likes)/(max_likes-min_likes)) );
img_size *= 800/612;