Rescaling UI Messes up Shape of it

[1Urge]

Hello, I have some UI for my game that is tweened whenever a change in health or stamina occurs, however as the Ui gets smaller on the X axis, the shape of it warps and distorts the image.

As you can see in the video, the left part of the health bar becomes unaligned, making it look weird.

Any ideas on how I can tween this image label, but prevent the image from distorting?

[Misinformater (luckybits)]

If you play around with ScaleType property you can solve it.

[1Urge]

I tried changing the ScaleType, none of them gave me the result I wanted.

[1Urge]

If anyone needs a solution on this, I ended up using a Ui Gradient and its Transparency property with a NumberSequence, that way the actual image was not being transformed, rather only the UiGradient’s transparency. I then updated the Keypoints in the transparency NumberSequence anytime a change in health or stamina was detected. Snippet of code below.

local function handleHealthChange()
	HEALTH_BAR.UIGradient.Transparency = NumberSequence.new{
		NumberSequenceKeypoint.new(0, 0), 
		NumberSequenceKeypoint.new((HUMANOID.Health/HUMANOID.MaxHealth) - 0.001, 0),
		NumberSequenceKeypoint.new(HUMANOID.Health/HUMANOID.MaxHealth, 1),
		NumberSequenceKeypoint.new(1, 1)
	}
	HEALTH_LABEL.Text = math.floor(HUMANOID.Health).."%"
end

local function handleStaminaChange()
	STAMINA_BAR.UIGradient.Transparency = NumberSequence.new{
		NumberSequenceKeypoint.new(0, 0), 
		NumberSequenceKeypoint.new((currentStamina/MAX_STAMINA) - 0.001, 0),
		NumberSequenceKeypoint.new(currentStamina/MAX_STAMINA, 1),
		NumberSequenceKeypoint.new(1, 1)
	}
	STAMINA_LABEL.Text = math.floor(currentStamina).."%"
end

Doing this allowed the image to keep its original dimensions while also simulating a change in stamina and/or health.

Credits to @OryTheGamer for helping me with this matter.