Figuring out the correct heights for a comparison - html

Question

I'm sorry the title is vague. I'm creating a pokedex site and I have the pokemon and a photo of Ash. Ash is 140cm tall, the only problem being that some pokemon are tiny and some are huge, I want the images to be no bigger then 400px tall and wide.
So for the biggest pokemon, it is 880cm tall, I need to have that be 400px tall and shrink Ash to be the right height relative to the pokemon. But for the smallest pokemon I need to make Ash 400px tall and change the pokemon's height to be relative to Ash.
I dont even know where to start with this problem so any ideas would be wonderful!

Answer 1

Don't display Ash's photo in full scale when you get out your 400 pixel limit. Use a cross-multiplication when you have a very tall Pokemon to decrease Ash's picture size, and on the other side, use another to enlarge Ash's picture when the Pokemon is very small.
With a 880 cm Pokemon for 400 pixels, while Ash is 140 cm tall, it means that Ash's picture should be (140*(400/880)) = 63 pixels height. Value 400/880 gives you that each centimeter for the Pokemon is 0.45 pixels, and 880/400 gives you that each pixel represents 2.2 cm.
Obviously, you can also prefer to use round numbers, and go for a "1 pixel = 3 cm" scale, so that your Pokemon will use a 294 pixels height image instead.
For very tiny Pokemons, you do the same operation, but by enlarging Ash's picture.
At 400 pixels height, Ash's picture has these characteristics: each pixel worths 0.35 cm, or one centimeter uses 2.85 pixels. So a 10 cm Pokemon will needs a 29 pixels height picture (10*(400/140) = 28.57).
When confident with the formula, you can compute automatically the scale in your program. Since it's very basic arithmetic, implementation language shouldn't be a real problem - JS can do that perfectly, or PHP.

Answer 2

In psuedo-code, I would do something like this
Assuming you have store 'height' in an Ash object and every pokemon object, and that you can later use their 'imgHeight' property later on to size your images.
setScaled = (big, small) => {
big.imgHeight = '400px';
small.imgHeight = (big.height / 400) * small.height
small.imgHeight = (400 / big.height) * small.height;
return [big, small]
}
for(poke in dex){
if(poke.height > 140){
scaled = setScaled(poke, ash);
//now scaled[0] is poke, scaled[1] is ash
}else{
scaled = setScaled(ash, poke);
//now scaled[0] is ash, scaled[1] is poke
}
}