How do you get an image to Preserve Aspect and Fit To Parent properly?

Maybe I have a fundamental misunderstanding of how to size an image (which I'm using as a menu panel) in a Canvas in Unity, but I can't find a solution to the issue of making such a panel always be as big as possible while maintaining the aspect ratio of the image.

With that in mind, there is one way I have of accomplishing this, but the method I use results in a panel that I can't seem to nest anything properly in. I feel like I'm doing something stupid or backwards, so if anyone can help me figure out the heck I'm doing wrong here, I would very much appreciate it.

So this one way I have of accomplishing what I mentioned above is to have a Canvas set its "Render Mode" to "Screen Space - Overlay", and in the Canvas Scaler its "UI Scale Mode" set to "Scale With Screen Size". Then in that Canvas I have my Image, of "Simple" Image Type and "Preserve Aspect" checked. This method now has an image which maintains its aspect ratio but always scales to fit its parent Canvas, which matches the Screen ratio. Now, where it falls apart is that the image now has its 'blue corners' always set to match the size of the Canvas, when in fact the image is not that size. This causes a problem because a child image (ie menu button) isn't being nested in the image (ie menu panel), instead its acting as if its nested in the canvas directly. Being nested in the canvas, actually pulls it "out of sync" with the menu panel image.

It's difficult to describe, so I hope this is clicking with someone. It seems like a super simple and common request, to have an image whose aspect is preserved, always fits within the canvas, and that can have sub-images nested properly.

 

Sounds familiar. I made a script that adjusts the width based on the height or vice versa for images. Without that I'm also just not able to get it the way I want it.

 

Add an "Aspect Ratio Fitter" to the image's game object and configure it correctly. then you wouldn't need the "Preserve Aspect" of the Image anymore.

 

@spanosyan

hi there,

I was reading description of your problem...

I think it's better show a picture how your images work right now - unless helpful tips above already solved your issue...

 

Thanks for all the replies. I'm going try using the Aspect Ratio Fitter the way @Hosnkobf suggested and will post pictures of the issues if that doesn't work out.

 

As it turns out, @Hosnkobf's suggestion was exactly what I needed to do. In order to preserve the aspect ratio and positioning of the elements within the menu panel, I centered the anchors within the panel so they would more or less stay stationary and used the Aspect Ratio Fitters to make them scale with respect to the Height of each element. I added an Aspect Ratio Fitter to each of the components within the panel and this did the trick. Thanks again!

 

@Hosnkobf thanks for the suggestion.
This worked for me.