No letterboxing. I think that looks bad.
From using %'s what I see is that the position (x,y) of the controls can always use straight up % and look the way I want. ie. x,y at 50% will always be the same position on any resolution because it's using 50% of it's parent and if no parent then that's calculating based on the screen width/height.
However using % for size (width, height) doesn't work correctly when done on a base resolution. ie. 50% width is not the same on a 4:3 vs 16:9. It'll appear much wider. However I don't want it to appear that much wider. I want it to look proportionate just like it does on my base resolution that I developed on. It will be wider than the 4:3 base resolution but not what 50% width would give you. Somehow it needs to know that 50% at 4:3 would = some other % at 16:9 to look basically the same on screen when I scale the control images.
I gave you a solution that does just that.
skip the percentages and use a coordinate system where the viewport is always 1 unit high and resolution.x / resolution.y wide and then place your objects relative to different corners,edges (or the center) instead.
so if you place a 0.5 units wide and 0.1 unit high healthbar 0.05 units down and 0.25 units to the left (to compensate for its width) from the top-center you just draw it at:
x = res.x / 2 + (-0.25 * res.y) //not a typo, we always multiply with the vertical resolution, the horizontal resolution only affects the origin position
y = 0 + (0.05 * res.y)
no stretching, no letterboxing and element size will be the same at 1440x1080 and 1920x1080, a wider aspect ratio only gives you more clean space in the center of the screen (if you place GUI elements at the left and right edges)