games - Progress bar that allows to understand both current and maximum values

I need to design a health bar for a game, so that the player could guess at a glance not only its relative value (i.e. amount of remaining health compared to its maximum), but also to understand how big that maximum is.

Here is an example: it is easy to see in both of these bars, even without numbers, that about 3/4 of maximum health is remaining, but it is also important to know that absolute amount in the second case is twice as big (150 vs 75).

Here this problem is solved in the most straightforward way, by making bar's length proportional to its maximum value:

This could work up to some point, but what if the "maximum maximum" value can be 10, or even 100 times bigger than the "minimum maximum"?

Here is another attempt where maximum amount is indicated by "hearts", which are filled according to the current health value:

Slightly better, but I would like to see if there are even better solutions that are 1) scalable (at least up to 10-20 times difference in maximum value, ideally up to 100), 2) don't take too much screen space, 3) easy to read.

Answer

Its better to keep the width of both energy levels the same as you have shown in the first model. You can try something like that