In my game the UI scales perfectly and fits the screen for all tested resolutions. No problem there.
But I need a background image for the UI that fills both width and height. Fitting an image to the UI Canvas works fine, but squishes or stretches the image to fit different resolutions. Setting Preserve Aspect fits correctly across the width but leaves blank bars top and bottom if the screen is too tall.
I cannot find any combo that fills on both windowed and full screen resolutions without stretching or squishing the image to fit. Well, there is one way which to make the image enormous, but that seems the wrong answer and all the image details get lost.
Is this a known limitation, or am I missing something?
Go to your Image in the editor, and in the Inspector:
Image component, Preserve Aspect option on.
Add an Aspect Ratio Fitter component and set the Aspect Mode to Envelope Parent.
In AspectRatio, you must enter the actual aspect ratio of the actual original jpg or png.
So, just open the jpg or png on your computer, and get the exact width and height. Divide to get the actual aspect ratio of the file - for example 1.3333 or 1.14324 or perhaps 1 if it is square.
Your image should now be aspect-filled!
Tip:
in the very unusual case that the image is generated on the fly or perhaps downloaded. You don’t know what the aspect ratio of the image file is. In that case, write a short script to find that aspect ratio, and, actually set the AspectRatio property of the AspectRatioFitter from code.
And the answer is — the AspectRatioFitter component.
Attach one of these to the image, set the mode to Envelope Parent,. set the aspect ratio to the aspect ratio of the image file, and IJW! (It Just Works).
