Unity: How to stretch UI picture to relative size of canvas without it overstretching?

Question

My UI elements in free-aspect ratio screen are perfect but when I change aspect ratios the text and pictures are way too small. I'm using an anchor to the corners for the UI elements; however, if I use the all-direction stretch then it overstretches. How do I prevent overstretching? I want the image to stretch relative to the canvas size while being anchored in a position. How do I do this?

Answer 1

First, You need to create an empty GameObject. This object needs to be a child of your canvas. Inside this empty object you'll put all of your GUI objects (Images, Buttons, etc...)

Like this

Next, set the anchor preset to strecth As here

Then you need to write this code (don't forget * 1f after Scale.width and height because if you don't write this the operation Scale.width / Scale.height will be considered as an integer and not a float)

Finally, use these Canvas Settings

Answer 2

If the anchors are set properly then it is most likely the Canvas Scaler needs to be changed to "Scale with Screen Size" mode so that it changes to the resolution you put in i.e. X:800, Y:600. If this still doesn't work then you should change text Paragraph to "Best Fit".