Установите изображения в поле на основе значений min и height

Question

Название может быть не лучшим, но позвольте мне объяснить. У меня минимальное значение высоты 50px и максимум 612px. Затем у меня есть большое количество изображений, которые должны вставляться в коробку с высотой 800px и динамической шириной.

Фокус в том, что каждое изображение имеет значение, мы можем назвать его . Что я хочу сделать, так это то, что изображение с большинством «нравится» должно иметь размер 612 пикселей, а изображение с наименьшим «любит» должно получить высоту 50 пикселей. Остальные изображения должны соответствовать размеру «нравится» по отношению к минимальным и максимальным значениям. Все изображения квадратного размера.

Я не могу получить математику вместе. Надеюсь, что вы, ребята, можете помочь :)

Пример 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;