Search code examples
javascriptimage-scaling

Fit images in box based on min and height values

The title might not be the best, but let me explain. I have a minimum height value of 50px and a maximum of 612px. Then I have a large amount of images that has to fit in a box with a height of 800px and a dynamic width.

The trick is that each image has a value, we can call it likes. What I want to do is that the image with most "likes" should get the size of 612px and the image with least "likes" should get the height of 50px. The rest of the images should size accordingly to their amount of "likes" against the min and max values. All images are square sized.

I can't get the math together. Hope you guys can help :)

Example 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>
Solution

  • Try this (assuming all images source files are 612 x 612 in the first place ...) :

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