How to fine-control UI elements scale

I'm developing a mobile game with a battle system. There's a scaling issue with some elements in this canvas. In my hierarchy, within the battle canvas there are character portraits. Each character portrait has:

• An image that serves as a frame for the portrait and has space below to show information.

• The effective portrait image.

• Text that shows how much health the character has left. This goes above the aforementioned frame.

• An image that serves as a healthbar. The healthbar goes below the frame and is shown through a gap via transparency.

  ---

Due to the nature of the UI, I need the frame and portrait to preserve their aspect sizes so they can scale with their container in case the game's resolution is higher than default.

Since the bar and text are small images, they get scaled with the character portrait itself, and their aspects don't coincide with how the preserved-aspect image does. I've tried many combinations of scaling aspects, but none work, and this will invariably need fixing. If anyone has dealt with this before, it would be a huge help for me. Thank you very much.