For some reason the constraint’s dominant axis is not changing from height. I’ve set it to width, tried cutting and pasting and deleting the element and the constraint, and have messed with the aspect type to no avail.
Here’s my setup:
^ this is the ImageLabel’s size.
Any ideas why this might not be scaling right?
Firstly, why not put the UIAspectRatioConstraint in the frame rather than the ImageLabel? All children of something with a Aspect Ratio Constraint also follow the same constraint automatically.
However, the issue is with your “AspectRatio” value. Play around with this until you get the correct size. If you want the exact same size as it was without the constraint, write down the ImageLabel’s original “AbsoluteSize” and alter the AspectRatio value until the new AbsoluteSize is the same.
I want to use the frame to clip the ImageLabel when it exceeds the bounds of the ancestor frame this is all in.
And the issue is not with the AspectRatio. I want my image to be square, yet I also want it to scale across multiple screen resolutions.
The issue here, like I said, is that it’s scaling by height instead of width, even when I have set it to width.
If you’re using scale it is never going to clip the ImageLabel to my understanding. (the image will just resize accordingly)
Now, it would if, of course, it constrained to height, now that I think about it.
Change aspect type from “FitWithinMaxSize” to “ScaleWithParentSize”
Yes, it will. I want my image to always reach the bounds on each side of the rectangular ancestor frame. The original image is square, so to preserve its scaling, the ImageLabel also has to be square.
I’ve already said that that doesn’t work.
Is it possible you could message me a place file with this UI in it? I could possibly play around with different values and see what I can do to help you.
Just set the size of the imagelabel to by 1,0,1,0?
It’s using 1,0,.5,0 as the max size, so increase it. I don’t see why you need the Y scale to be .5 instead of 1?
I was using it to test whether the size was being defined by height or width.
Since I set the height to 0.5, that means even when I set the dominant axis to width, it scaled by height.
ui_aspectratio.rbxl (17.5 KB)
cc @joritochip
Have you tried changing the aspect type and then changing the dominantaxis back and forth? I’ve always found the aspect ratio constrains to be very fiddley
Didn’t work for me rip
Why are you using an aspect ratio constraint to make a blurred map of the original map to fill unused space? The way a constraint functions is it will keep everything equal in size (or proportional). Because your UI is set up to extend based on the resolution, this would not be what you are looking for as no one value would fill the empty space on every device.
I am using it to keep the image square while making it resize with the frame it is in. The only point of it is to keep the image square.
And the one value that would fit in the space is {1,0},{1,0}.
However, I don’t want my scaled image to be stretched - the original image was square, so that means I’ll need to overcompensate to fit a rectangular space.
Would you be against using a script to do this?
No, although I’d much prefer not to. My logic is sound, this should all work with what is in the Roblox engine.
I think if this can’t be solved, I’ll post a bug report.
Will the space always be taller than it is wide, or do you really need this to be “any possible use” fit?
In some rare cases it may wider than it is tall, however the game will only be available on PC and XBOX, meaning that screens will usually be taller than the width of the element.
I’m not really designing it for those; however in the case they do get used, then the frame included in this topic will clip the image.
ui_aspectratio.rbxl (17.5 KB)
This works as long as “back” doesn’t switch to be more horizontal than vertical, and even then you could give it some leniency if you changed the aspect ratio of the inner square to be like 1.2 or 1.4 and uploaded wider images so it has a little bit of a “bleed”
All I did was set the width of the imagelabel to be Scale = 5. This way the height should always be the “max” extent
Why not just use the Size Constraint property?
Much easier imo.
