How can I make an image maintain it's aspect ratio in Unity UI?

Questions & Answers
1

I want to make it so that an image maintains its aspect ratio, and instead becomes cropped when the image box is resized. How can I do this?

2

If you want to preserve the original aspect of the sprite then tick the Preserve aspect in your Image.

If you want to crop the Image then Make a parent object with a RectMask2D then put your Image as a child of that object, add to your Image object an AspectRatioFitter and tweak it as you like.

4

If you want to add an image to your canvas which:

  • acts as a background,

  • maintains its aspect ratio,

  • and automatically scales to fit the game view’s width and height,

add new object with an Image component and with an Aspect Ratio Fitter component. Add the image to the source image, select Envelope Parent in the Aspect Mode and make it stretch horizontally and vertically in the Rect Transform component.

191347-screenshot-20220118-152327.png

191348-screenshot-20220118-152341.png
191348-screenshot-20220118-152341.png524×726 66.4 KB

1 Like
3

Alter the size in the Transform → Size section.
Also be careful with the gizmo you choose: the one with the three colour squares can resize aspect ratio if you drag the center square (yeah a fourth square).
The gizmo that puts blue spheres around the selection only crops everything.