根据最小和高度值拟合框中的图像

Fit images in box based on min and height values

本文关键字：拟合 图像 高度      更新时间：2023-09-26

标题可能不是最好的，但让我解释一下。我有一个最小的高度值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>

试试这个(假设所有图像源文件首先是612 x 612…):

img_size = 50 + Math.round( (612-50)*((img_likes-min_likes)/(max_likes-min_likes)) );
img_size *= 800/612;
相关文章：