How to get a background image to fill the screen and retain aspect ratio

Question

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?

Raised

Answer 1

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).

Raised

Answer 2

Go to your Image in the editor, and in the Inspector:

1. Image component, Preserve Aspect option on.

2. Add an Aspect Ratio Fitter component and set the Aspect Mode to Envelope Parent.
   

3. 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.

Tumulus

Thanks for adding some nice screenshots to the answer I already gave back in July last year.

– Raised

Dude, thank you so much for posting this. It's so non-intuitive in Unity and I was pulling my hair out!

– Narrows

Echoing what karmington said: in my experience the "Aspect Ratio" must be the aspect ratio of the original image for the "Envelope Parent" and "Fit in Parent" modes to work intuitively. For example, a 16:9 image should have a 1.777778 Aspect Ratio. Setting Aspect Ratio to 0.001 in Envelope Parent mode instead forces a "Fit To Width" behavior.

– Primordial

Amazing aproach. I work with UI in unity for a long time, and have always used workarounds for this situation! Thank you!

– Rhomb

Works like a charm, thank you! Also, if anyone else comes across this, you can actually write the aspect ratio directly, like "16/9", and Unity will calculate the resulting value correctly. All basic math operations work in any inspector number field.

– Atween

Answer 3

What i usually do is set the background image to be the skybox.

Preprandial

Answer 4

I wasn’t able to make it work with an Image directly under the Canvas. I did this:

Canvas → Panel (reset to fill screen) → Image with AspectRatioFitter set to Envelope Parent (divide w/h for Aspect Ratio)

Salomo