Search code examples
cssunity-game-engineunity-ui

Unity UI Builder: Square Image in Button


so I'm new to the Unity UI Builder and I have a problem when it comes to displaying a square Image (VisualElement with texture in background) in a button.
This is how the Element looks in the UI Builder.
This is how the image looks when I resize the button height (and what I want to achieve).
This is how the image looks when I resize the button width (and what I want to achieve).

As you can see the image gets streched and I want the image to be square all the time. I've already tried to implement some css-tricks I found when googling, but none of them work. Is there any way I can force this behaviour with css or other means? Thanks.


Solution

    • Set Width and Height to 100% of your visual element.
    • Then set the Scale Mode (Background) to the last option.

    It will stretch the image to max possible without hidding any part of the image, and will keep the aspect ratio.

    If you know css, it is the same as background-size: contain;.

    The second option is the same as background-size: cover;.